2

我有这个标记：

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

我如何以最好的方式制作这个循环？现在最后一张图像刚刚淡出，而第一张图像没有再次淡入。

4

4 回答 4

2

检查 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

于 2012-09-06T13:34:00.680 回答
1

演示：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);​
于 2012-09-06T13:35:44.497 回答
0

实际上，我只是为此编写了一个插件，它的可读性很强，因此您只需看一下就可以理解。

Github 存储库 - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

箭头的某些功能仍在开发中，以使其更具动态性，但它在这里也是一个示例。我正在滑动 html，但您可以轻松地添加一个带有图像的 .slide-panel 类。

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

编辑：他们编辑了脚本，因此它没有 setInterval 循环，一旦用户单击箭头并有兴趣查看更多内容，github 上的原始文件就有一个间隔循环。如果您希望它在加载时循环，则可以轻松更改。当用户不感兴趣时​​，我只是不想使用额外的资源。下班后会在github上放一个例子。

于 2012-09-06T13:35:26.880 回答
0

我知道这是一个旧线程，但有人可以告诉我显示前一个 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 链接并尝试了各种组合，但似乎无法掌握正确的代码

谢谢

于 2016-12-25T22:13:58.913 回答