javascript - カルーセル スタイルで DIVS の表示/非表示を繰り返す

Question

私は次のHTMLを持っています - http://jsfiddle.net/X763j/

私がやろうとしているのは、一種の無限スライダーの方法で一度に 1 つずつ表示するそれらをループすることです。

JavaScript は私の得意分野ではありませんが、私の理解では、jQuery の .toggle 関数を使用できます。

次のものだけが表示されるようにするにはどうすればよいですか。

誰かが私を正しい方向に向けることができれば、私はそれを感謝します.

Answer 1

jQueryでできます。1 つを非:visible表示にし、1 つを表示し.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);​

デモ

私が使用したすべての関数とセレクターの詳細については、 jQuery ドキュメントを参照してください。

多くのjQuery Carouselプラグインの 1 つも見てください。

Answer 2

スライドをループする別のコード例を次に示します。これは最適化されていないことに注意してください。

$(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);
});​

Answer 3

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/