在使用setInterval

Question

jQuery的图像滑块循环我有这个标记：

<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

其实我只是写了一个插件，这一点，它是相当可读的，所以你可以可能只是看着它而已。

GitHub库 - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

一些为箭头的功能尚在制定上更有活力，但它的工作原理这里有一个例子也是如此。我滑动html，但你可以很容易地添加一个.slide面板类与图像里面。

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

编辑：他们编辑的脚本，所以它不会有一个的setInterval循环github上原来有一个间隔循环一旦用户点击箭头并有兴趣看多。如果你想让它在负载上循环，很容易改变。当用户不感兴趣时​​，我只是不想使用额外的资源。下班后要在github上举一个例子。

Answer 3

演示：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 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链接，并尝试了各种组合，但不能似乎掌握正确的代码

感谢