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

Question

这是一个有点复杂的谜题，我希望得到一些关于其他人如何解决这个问题的反馈。

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

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

但是......我想将箭头变成滑块（不是href），具有以下行为：

单击右箭头将...

1. 开始通过xajax在屏幕外加载新内容，
2. 原因旧内容向左滑动（从屏幕上到屏幕外） 与新内容齐平也向左滑动（从屏幕外到 屏幕上）。

为什么？滑块很棒，我认为它看起来很专业。这是基本的滑块内容（例如 这个 jQueryscrollLeft 滑块），除了单击箭头即可动态加载内容，这引发了一些问题：

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

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

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
});

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