首页 文章

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

提问于
浏览 次
2

layout

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

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

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

但是...... I'd like to turn the arrows into a slider （不是一个href）具有以下行为：

单击右箭头将...

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

  • 导致旧内容向左滑动（从屏幕上移到屏幕外），同时新内容也向左滑动（从屏幕外到屏幕） .

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

  • 最好的办法是什么？

  • 我是否使用PHP预先填充所有空的隐藏文章DIV？

  • 我是否使用jQuery在每次箭头单击时附加/前置/删除文章DIV？

  • jQuery "scrollLeft"偏移量会是什么样的？内容DIV是静态宽度，但是 jQuery scrollTo 会更好吗？

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

php jquery slider

2 回答

  • 1

    这是我提出的解决方案 .

    http://jsfiddle.net/tXUwZ/

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

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

    回复于
  • 4

    我认为你有两种选择：

    • 填充页面加载时的每个滑块，以便jQuery单击功能为内容设置动画

    • 使用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
});

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

    回复于

相关问题