Php 使用动态上一页/下一页内容的jQuery滑块的最佳方法？

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

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

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

但是我想通过以下行为将箭头变成滑块（不是href）：

单击右箭头将

开始通过xajax在屏幕外加载新内容

使旧内容向左滑动（从屏幕上滑到屏幕外） 与新内容齐平并向左滑动（从屏幕外滑动到 屏幕上）

为什么?？滑块非常棒，我认为它看起来很专业。这是基本的滑块功能（如），除了在单击箭头时动态加载内容，这会引发一些问题：

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

---

我希望我的问题是清楚的。。。任何建议都将不胜感激

我认为你有两个选择：

在页面加载时填充每个滑块，以便jQuery click函数为内容设置动画

使用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>

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

$（“.next”）.live（'click'，function（））{
var current_id=$（this.prev（“.on_screen”）.attr（“id”）；//获取当前页面id
$（“.content”）.css（“float”，“right”）；//将所有元素向右浮动
$（“.off_screen_right”）.animate（{display:none；}）；//使最右侧逐渐消失
$（“.on_screen”）.attr（“class”，“off_screen_right”）；//在屏幕上设置新的off_screen_right，并添加正确的ID属性
$（“.off_screen_left”）.attr（“class”，“content on_screen”）；//使off_screen保持新的on_screen
$（“.container”）.prepend（“”）；//添加新的off_screen_left元素并添加正确的ID属性
$（“.off_screen_left”）.load（“load content.php？page_id=“+current_id-1”）//填充新的off_screen_left元素
});
$（“.back”）.live（'click'，function（）{
var current_id=$（this）.next（“.on_screen”）.attr（“id”）；//获取当前页面id
$（“.content”）.css（“float”，“left”）；//将所有元素向左浮动
$（“.off_screen_left”）.animate（{display:none；}）；//使最左侧逐渐消失
$（“.on_screen”）.attr（“class”，“off_screen_left”）；//在屏幕上设置新的off_screen_left，并添加正确的ID属性
$（“.off_screen_right”）.attr（“class”，“content on_screen”）；//使off_screen_right成为新的on_screen
$（“.container”）.append（“”）；//添加新的off_screen_left元素并添加正确的ID属性
$（“.off_screen_right”）.load（“load content.php？page_id=“+current_id+1”）//填充新的off_screen_left元素
});

---

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

以下是我提出的解决方案

如果有人对如何清理它或使它更紧的想法，请让我知道

---

非常感谢@Jamie朝着正确的方向努力

另外，我知道这会破坏书签，但我计划实现HTML5的历史API（或者History.js…），我真的很喜欢你的做法。对于动画，当前内容是否会褪色，然后突然被下一个内容替换？有没有可能使这成为一个平稳的平移过渡？没有。因为您已经将所有内容div浮动到左侧或右侧（请参见每个单击函数中的第二行），所以它们都相互倾斜。如果元素移动，则元素向右移动，反之亦然。我们可以做的不是将其动画设置为“display:none”，而是将其动画设置为“width:0”，使其看起来平滑滑动。您需要使用：

$（“.off\u screen\u right”）.animate（{width:0px；}）.remove（）

以便首先将其减少到0px，然后从标记中删除。删除它。构建一个演示，我马上发布：）你会为CSS做什么？如果“容器”有固定的宽度，事情似乎不会滑动，即使有溢出：隐藏。。。

$(".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
});