具有动态上一个/下一个内容的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
});

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