Question

我有这个标记：

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

和这个脚本

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

如何以最佳方式制作此循环？现在，最后一张图像淡出，第一张图像再次淡入。

Answer 1

检查nextItem是否有项目，如果没有将其设置回第一个项目：

var nextItem = $('.slider_item.active')
    .fadeOut()
    .removeClass('active')
    .next('.slider_item');

if (nextItem.length === 0) {
   nextItem = $('.slider_item').first();
}

nextItem.fadeIn().addClass('active');

以下是一个示例：jsFiddle

Answer 2

演示：http://jsfiddle.net/gdS8Q/2/

var cur = 0;
var count = $('.slider_item').length;

$('.slider_item').hide();
$('.slider_item').eq(0).show();

setInterval(function() {    
    $('.slider_item').eq(cur).fadeOut(function () {
        $(this).removeClass('active');
        cur = (cur + 1) % count;
        $('.slider_item').eq(cur).addClass('active').fadeIn();
    });
}, 2000);

Answer 3

我实际上只是为此编写了一个插件，它非常易读，所以你可以通过查看它来理解它。

Github repo - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

箭头的一些功能仍在继续工作，以便更具动态性，但它在这里也是一个例子。我正在滑动html，但您可以轻松添加一个带有图像的.slide-panel类。

在行动中 http://strikingalchemy.publishpath.com/portfolio

编辑：他们编辑了脚本，因此它没有setInterval循环，一旦用户点击箭头并且有兴趣了解更多，github上的原始文件就会有一个间隔循环。如果你想让它循环加载，可以轻松更改..我只是不想在用户不感兴趣时使用额外的资源。下班后要在github上放一个例子。

Answer 4

我知道这是一个旧线程，但有人可以告诉我显示前一个div的正确代码吗？

这是HTML

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

和jQuery

     var nextItem = $('.slider_item.active')
        .fadeOut()
        .removeClass('active')
       .next('.slider_item');

 if (nextItem.length === 0) {
       nextItem = $('.slider_item').first();
    }
       nextItem.fadeIn().addClass('active');

我看到了jsfiddle链接并尝试了各种组合，但似乎无法掌握正确的代码

由于

带有setInterval的jQuery图像滑块循环

4 个答案: