迭代通過DIVS顯示/隱藏他們在一個旋轉木馬風格

Question

我有以下的HTML - http://jsfiddle.net/X763j/

我所試圖做的是循環通過他們的還挺無限滑蓋的方式一次顯示一個。

JavaScript是不是我的強項，但是從我的理解，你可以使用jQuery的.toggle功能。

我會怎麼做，以便它僅表現爲下一個。

如果有人能在正確的方向指向我，我將不勝感激。

Answer 1

你可以用jQuery來做到這一點。隱藏:visible之一併顯示.next()之一。一旦你完成了，下一個是:first之一。

function next() { 
    var current = $("#slider .slide:visible"); 
    current.hide(); 
    var next = current.next(".slide"); 
    if(next.length == 0) 
     next = current.siblings().filter(":first") 
    console.log(next); 
    next.show(); 
} 

setInterval(next, 1000);​ 

Demo

您可以檢查jQuery Documentation讓所有的我使用的功能和選擇的更多信息。

你應該看看過許多jQuery Carousel插件之一。

Answer 2

在使用setInterval可以調用處理滑塊對你來說，是這樣的一個功能。

setInterval(slide, 4000); // Set interval, callback function, and how often to swap slide 

function slide() { 
$('div.active').removeClass('active').fadeOut(500, function() { 
    if($(this).next('div.slide').length) { 
     $(this).next('div.slide').addClass('active').fadeIn(500); 
    } else { 
     $('div.slide').eq(0).addClass('active').fadeIn(500); 
    } 

}); 
}​ 

一個的jsfiddle： http://jsfiddle.net/X763j/3/

Answer 3

下面是另一個代碼示例，只是循環幻燈片。請注意，這並未優化。

$(document).ready(function() { 
    var i = 0; 
    var slides = $('.slide'); 
    var currentSlide = slides.first();   
    slides.each(function(index, value) { //Hide the all the slides 
     $(value).hide(); 
    }); 

    currentSlide.show() //Show the first 

    setInterval(function() { //Interval that loops. 
      i++; 
      if (i + 1 > slides.length) i = 0; 
      currentSlide.hide(); 
      currentSlide = slides.eq(i); 
      currentSlide.show();  
    }, 3000); 
});​