在使用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鏈接，並嘗試了各種組合，但不能似乎掌握正確的代碼

感謝