『jQuery 最高の教科書』めも③-スライドショー

スライドショー

仕組み

全ての画像を一箇所に重ね、非表示
最初のスライドのみを表示
時間経過後、フェードアウトで非表示。次が表示される

eq()

複数あるjQueryオブジェクトのうち、引数に渡したインデックスに該当するものを選択するメソッド

var $slides = $(this).find('img'), // すべてのスライド
            slideCount = $slides.length,   // スライドの点数
            currentIndex = 0;              // 現在のスライドを示すインデックス

        // 1 番目のスライドをフェードインで表示
        $slides.eq(currentIndex).fadeIn();

currentIndexが引数なので0が入る

fadeIn()

display:none;が指定されている要素を徐々に不透明度を変化させ表示させるメソッド

setInterval()

指定した時間ごとに指定した処理をする関数
(実行する関数, 間隔)

setInterval(showNextSlide, 7500);

次に表示すべきスライドのインデックスを調べる

自分で書いてみる

ヒント

//一旦HTMLを読んで処理を開始するねp46
//slideshowというクラスに各々function()の処理をするよp53
        //登場人物を変数でリストアップ
        //slideshowのimg要素
             //スライドの枚数 slideCount
            //現在のスライドを示すインデックス currentIndex

        //1枚目をフェードインで表示 slideshowのimg要素の現在つまりインデックス0をfadein

        // 7500 ミリ秒ごとに showNextSlide 関数を実行
        

        //次のスライドを表示させる関数
        //function 関数名
            // 変数：次に表示するスライドのインデックス(もし最後のスライドなら最初に戻る) 1,2,3,0

            // 現在のスライドをフェードアウト
            

            // 次のスライドをフェードイン
            //slideshowのimg要素のnextIndexのインデックス数をfadeIn

            // 現在のスライドのインデックスを更新
            

$(function(){
    $('.slideshow').each(function (){
        var $slides = $(this).find('img'),
            slideCount = $slides.length,
            currentIndex = 0;

        $slides.eq(currentIndex).fadeIn();
        setInterval(showNextSlide, 5000);

        function showNextSlide (){
            var nextSlide = (currentIndex + 1) % slideCount; 
            
            $slides.eq(currentIndex).fadeOut();
            $slides.eq(nextSlide).fadeIn();
            currentIndex = nextSlide;
        }
    });
});