ぬえさぶろうのAnimate放送部

スライドショー

解説

このページのスライドショーは最も基本的なスライドショーです。
7500ミリ秒ごとに6枚のスライドを一枚ごとに入れ替えるだけの仕組みです。

コード

HTML

<div class="slideshow">
           <img src="../../images/news/slideshow/slide_image01.png" alt="">
           <img src="../../images/news/slideshow/slide_image02.png" alt="">
           <img src="../../images/news/slideshow/slide_image03.png" alt="">
           <img src="../../images/news/slideshow/slide_image04.png" alt="">
           <img src="../../images/news/slideshow/slide_image05.png" alt="">
           <img src="../../images/news/slideshow/slide_image06.png" alt="">
 <!--/.slideshow--></div>

CSS

/*スライドショー*/
.slideshow{
    width:100%;
    min-width:288px;
    height:158px;
    overflow:hidden;
    position:relative;
}
.slideshow img{
    display:none;
    width:100%;
    position:absolute;
    left:50%;
    margin-left:-144px;
}
/*768px以上の画面サイズに対応*/
@media only screen and (min-width:767px), print {
    .slideshow{
        width:100%;
        min-width:748px;
        height:417px;
    }
    .slideshow img{
        display:block;
        min-width:768px;
        margin-left:-384px;
    }
}
/*1024px以上の画面サイズに対応*/
@media only screen and (min-width:1024px), print {
    .slideshow{
        width:100%;
        min-width:714px;
        height:401px;
    }
    .slideshow img{
        display:block;
        min-width:714px;
        margin-left:-357px;
    }
}

JS

// スライドショー
$(function(){
    $('.slideshow').each(function(){
        var $slides = $(this).find('img'),
            slideCount = $slides.length, //スライド点数
            currentIndex = 0;
        
        //一番目のスライドをフェードインで表示
        $slides.eq(currentIndex).fadeIn();
        
        //7500ミリ秒ごとにshowNextSlide関数を実行
        setInterval(showNextSlide,7500);
        
        //次のスライドを表示する関数
        function showNextSlide(){
            //次に表示するスライドのインデックス
            // nextIndex  1 = (0 + 1) % 6
            var nextIndex = (currentIndex +1) % slideCount;
            $slides.eq(currentIndex).fadeOut();
            $slides.eq(nextIndex).fadeIn();
            //現在のスライド
            currentIndex = nextIndex;
        }
    });
});

解説

（1）全てのスライドを一か所に重ねて配置し、いったん非表示にする

CSS

.slideshow{
    position:relative;
}
.slideshow img{
    display:none;
    position:absolute;
    left:50%;
    margin-left:-800px; //画像ファイルの半分の横幅
}

JS

//slideshowのimg要素をすべて探す
var $slides = $(this).find('img'),

（2）最初のスライドのみをフェードインで表示する

JS

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

eq

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

（3）一定時間が経過したら、現在表示されているスライドをフェードアウトで非表示にし、次のスライドをフェードインで表示する

JS

//7500ミリ秒ごとにshowNextSlide関数を実行
setInterval(showNextSlide,7500);

setInterval(実行する関数,その関数を実行する時間)

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

（4）以降は一定時間ごとに「現在のスライドをフェードアウト」と「次のスライドをフェードイン」を繰り返す

JS

 //次のスライドを表示する関数
        function showNextSlide(){
        //次に表示するスライドのインデックス
            var nextIndex = (currentIndex+1) % slideCount;
            $slides.eq(currentIndex).fadeOut();
            $slides.eq(nextIndex).fadeIn();
        //現在のスライド
            currentIndex = nextIndex;
        }

（5）最後のスライドが表示されたら先頭のスライドに戻り、（4）の処理を繰り返す。この動作はユーザーがそのページから離れるまで繰り返される。

JS

//1 = 0 + 1 % 6 
            2 = 1 + 1 % 6
 var nextIndex = (currentIndex +1) % slideCount;
 //0 = 1
    1 = 2
 currentIndex = nextIndex;