具有动态上一个/下一个内容的jQuery滑块的最佳方法？

这是一个有点复杂的难题，我喜欢一些关于其他人如何处理这个问题的反馈。

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

我的问题与动态内容加载有关。 在页面加载时，我将箭头分配给上一篇/下一篇文章的URL。 没问题。 这些url很友好，页面会重新加载到下一篇文章，我可以整天浏览它们。

但是…… 我想将箭头转换为滑块 （而不是href），具有以下行为：

单击右箭头将…

1. 开始通过xajax在屏幕外加载新内容，
2. 导致旧内容向左滑动（从屏幕上移到屏幕外），同时新内容也向左滑动（从屏幕外到屏幕）。

为什么？ 滑块很棒，我觉得它看起来很专业。 这是基本的滑块（比如这个jQuery scrollLeft滑块 ）除了内容在点击箭头时动态加载，这引发了一些问题：

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

我希望我的问题很清楚……任何建议都会非常感激！

Answer 1

这是我提出的解决方案。

http://jsfiddle.net/tXUwZ/

如果有人有关于如何清理它或使其更紧的想法，请告诉我！

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

Answer 2

我认为你有两种选择：

1. 填充页面加载时的每个滑块，以便jQuery单击function为内容设置动画
2. 使用AJAX调用在每个幻灯片的基础上填充数据

如果它只是几个项目/幻灯片，那么我会在页面加载时填充。 如果您正在查看大量幻灯片（您可能期望每日新闻博客），或者如果每张幻灯片都包含大量数据（例如高分辨率图像等），我会选择第二个选项。

第二种选择很容易。 所有你需要的是三个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('
'); // 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('
'); // 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 }); 

但这只是一种选择。 您可以使用开箱即用的滑块，但我更喜欢自定义代码，以便我确切地知道我在做什么。