具有动态prev/next内容的jQuery滑块的最佳方法？

Question

这是一个有点复杂的难题，我很乐意提供一些关于其他人如何解决这个问题的反馈。

这个网站基本上是一个免费的区域新闻博客。底部的图像演示了布局（忽略日期重叠毛刺）。它用PHP，jQuery和xajax编码。

我的问题与动态内容加载有关。就像在页面加载时一样，我将箭头分配到前一篇/下一篇文章的URL。没问题。网址很友善，页面重新加载到下一篇文章，我可以整天浏览它们。

但是...... 我想转箭与以下行为滑块（不是一个href）：

点击右箭头将...

1. 开始加载新的内容通过xajax的屏幕外，
2. 因为旧的内容向左右滑动（从屏幕到屏幕之外） 平齐新的内容还剩下滑动（从屏幕外到屏幕上 ）。

为什么？滑块非常棒，我认为它看起来很亲。这是基本的东西滑块（如this jQuery scrollLeft slider），除了与内容进行动态加载上的箭头，这引起了一些问题的点击：

• 什么是我们的最佳方法呢？
• 我是否使用PHP预先填充所有空的隐藏文章DIV？
• 我是否使用jQuery在每个箭头单击后附加/前缀/删除文章DIV？
• jQuery“scrollLeft”偏移量会是什么样子？内容DIV是静态宽度，但我会更好用jQuery scrollTo？

我希望我的问题很清楚......任何建议将不胜感激！

Answer 1

下面是我提出的解决方案。

http://jsfiddle.net/tXUwZ/

如果任何人有关于如何清理或使其更严格的想法，请让我知道！

非常感谢@Jamie推动正确的方向！

Answer 2

你必须在我看来两个选项：

1. 填充在页面加载每个滑块，jQuery的点击功能动画内容
2. 使用AJAX调用
填充在每张幻灯片的基础数据

如果它只是一些项目/幻灯片，那么我会填充页面加载。如果您正在查看大量幻灯片（您可能会期望每日新闻博客），或者如果每张幻灯片都包含大量数据（如高分辨率图像等），则可以使用第二种方法。

第二个选项很容易做到。所有你需要的是三个div（一个用于屏幕幻灯片，两个用于侧面屏幕外幻灯片，当单击任一箭头时将'替换'屏幕上的幻灯片）。我会用这样的：

<div class="container"> 
    <div class="inner-container"> 
     <div class="back"></div> 
     <div class="content off_screen_left" id="1"></div> 
     <div class="content on_screen" id="2"></div> 
     <div class="content off_screen_right" id="3"></div> 
     <div class="next"></div> 
    </div> 
</div> 

而且所需的CSS：

.container{width:200px;height:150px;overflow:hidden} 
.inner-container{width:600px;height:150px;margin-left:-200px} 
.content{float:left;width:200px;height:150px} 

至于jQuery的：

$(".next").live('click', function(){ 
    var current_id=$(this).prev(".on_screen").attr("id"); // get current page ID 
    $(".content").css("float","right"); // float all elements to the right 
    $(".off_screen_right").animate({display:none;}); // make the furthest right disappear gradually 
    $(".on_screen").attr("class","off_screen_right"); // make on_screen the new off_screen_right and add the correct ID attribute 
    $(".off_screen_left").attr("class","content on_screen"); // make off_screen_left the new on_screen 
    $(".container").prepend('<div class="content off_screen_left" id="'+current_id-1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute 
    $(".off_screen_left").load("load-content.php?page_id="+current_id-1); // populate the new off_screen_left element 
}); 
$(".back").live('click', function(){ 
    var current_id=$(this).next(".on_screen").attr("id"); // get current page ID 
    $(".content").css("float","left"); // float all elements to the left 
    $(".off_screen_left").animate({display:none;}); // make the furthest left disappear gradually 
    $(".on_screen").attr("class","off_screen_left"); // make on_screen the new off_screen_left and add the correct ID attribute 
    $(".off_screen_right").attr("class","content on_screen"); // make off_screen_right the new on_screen 
    $(".container").append('<div class="content off_screen_right" id="'+current_id+1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute 
    $(".off_screen_right").load("load-content.php?page_id="+current_id+1); // populate the new off_screen_left element 
}); 

但是，这只是一个选项。你可以使用滑块开箱即用，但我更喜欢定制代码，以便我确切地知道我在做什么。