インデックスボタンを加えよう

どうもRyokutyaです。
今回は、前回作ったシンプルな形な「自動で画像が動くスライド」に追加で機能を追加していきます。

今回やること

前回までで作った自動で画像が動くスライドにインデックスボタンを追加し、画像に連動して色が変わるようにします。

コードの紹介

全部を含んだコードは「画像が自動で動くスライドを作ろう！」で紹介していますので、今回の記事の該当箇所のみを載せています。
コピペしたい方は「画像が自動で動くスライドを作ろう！」でお願いいたします。

css

.active{
    background-color: blue;
    color:white;
}

JavaScript(+jQuery)

 
    //=================================================//
    //indx_btnの作成
    //=================================================//
    for(i=0; i < slideLength; i++){
        var indexBtn=document.createElement('li');
        indexBtn.id="index_btn"+i;
        indexBtn.className="index_btn";
        indexBtn.textContent=i+1;
        document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
    }

    //=================================================//
    //index_btnの色変えの制御用の関数
    //=================================================//
//1つめのボタンにactive（クラス）を付与
    $('.index_btn').eq(0).addClass('active');
    function activeMethod(){
        $('.index_btn').eq(loopCounter).addClass('active');
        $('.index_btn').not($('.index_btn').eq(loopCounter)).removeClass('active');
    }

    //=================================================//
    //autoslider
    //=================================================//
    var loopCounter=0;
    var clear1;
    var clear2;
    var clear3;
    var clear4;
    var clear5;
    var clear6;
    var time=4000;//スライドが移動する間隔
    var autoslider1=function(){

        if( loopCounter == slideLength-1){
            $('.index_btn').eq(0).addClass('active');//1つめのボタンにactive（クラス）を付与
            $('.index_btn').not($('.index_btn').eq(0)).removeClass('active');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            clear1=setTimeout(autoslider1,time);

        }else if( loopCounter &let; slideLength ){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            activeMethod();
            clear2=setTimeout(autoslider1,time);

        }else{
            $('.slides').removeClass('transition');
            setTimeout(autoslider2,0);
        }
        
    }

コードの説明

インデックスボタンの自動追加

インデックスボタンを画像の枚数に合わせて自動で追加しています。
自動で追加する方法は「インデックスボタンを自動で追加しよう！」で紹介した方法をコピペして使っています。

画像に連動してインデックスボタンの色を変更する

//=================================================// 
//index_btnの色変えの制御用の関数
//=================================================//
//1つめのボタンにactive（クラス）を付与
    $('.index_btn').eq(0).addClass('active');
    function activeMethod(){
        $('.index_btn').eq(loopCounter).addClass('active');
        $('.index_btn').not($('.index_btn').eq(loopCounter)).removeClass('active');
    }

画像に連動してインデックスボタンの色を変更する方法も「表示中の画像に対応するインデックスボタンの色を変えよう！」で説明した方法をコピペして使っていますが、index（変数）だったところが、今回はloopCounter（変数）に代わっているので注意してください。
コードの説明をもう一度確認したいかたは「表示中の画像に対応するインデックスボタンの色を変えよう！」の記事をご覧ください。

autosolider1を変更する

var autoslider1=function(){

        if( loopCounter < slideLength){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            clear1=setTimeout(autoslider1,time);
            activeMethod();
                
        }else{
            $('.slides').removeClass('transition');
            setTimeout(autoslider2,0);
            activeMethod();
        }

activeMethod（色変え制御用の関数）に連動させる処理をまとめてあるので、autosolider1にactiveMethodを追加するだけで、連動させることができます…
と言いたいのですが、このままではうまくいきません。

動画でもあるように初めはうまくいくのですが、2周目に入った時「1」の色が変わっていません。
これは、2周目に入る時<ul>の座標をリセットしているためです。
2周目に入るとき、1番最初の画像が表示されているときは、目で見てわからないようにしているだけで、2種類の画像を表示しています。

画像は同じ画像ですが、割り当てられたloopCounterの値はことなります。
今回の場合ですと、画像が5枚のスライドなのでloopCounterの値は最大で4です。（0~4の5つ）
画像にもあるように、2セット目の2枚目（loopCpunterの値：4）になった時、座標のリセットを行い1セット目の2枚目（loopCounterの値：0）を表示しています。
activeMethodはloopCounterの値に連動した.index_btnにactiveクラスを追加しているだけなので、見た目が1枚目になった時は、2セット目2枚目（loopCounterの値：4）が表示されています。activeMethodはindex_btn.eq(5)に（autosolider1内でloopCounterは+1されるため5になります）activeクラスを追加しようします。
該当するインデックスボタンがないため何も起こらずインデックスボタンの色が変わりません。
そのためactiveMethodを入れただけではスライドが2周目に入った時1だけ色が変わらずうまくいきません。

これを修正するためにはloopCounterの値が最大の時の分岐を作らないといけません。（今回でいえばloopCounterの値が4の時）

var autoslider1=function(){

        if( loopCounter == slideLength-1){
//1つめのボタンにactive（クラス）を付与
            $('.index_btn').eq(0).addClass('active');
         $('.index_btn').not($('.index_btn').eq(0)).removeClass('active');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            clear1=setTimeout(autoslider1,time);

        }else if( loopCounter < slideLength ){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            activeMethod();
            clear2=setTimeout(autoslider1,time);

        }else{
            $('.slides').removeClass('transition');
            setTimeout(autoslider2,0);
        }
        
    }

もともとあったautosolider1の中のif文を修正します。
一番上に新しい条件のloopCounter＝＝slideLengthを加えます。
処理部分の1行目は.index_btnの0番目にactiveクラスを追加するための記述です。
loopCounterの値に関係なく0番目にクラスを追加することでスライドが2周目に入った時インデックスボタンの0の色が変化します。

処理部分の2行目は.index_btnの0番目以外の.index_btnからactiveクラスを削除するための記述です。
処理部分の1行目と2行目はactiveMethodの内容とほぼ同じなのでコードの詳しい説明はそちらで確認してください。
処理部分3行目以降は前回のautoslider1のif文と同じ内容です。
else if以降は前回の文と全く同じです。
if文の条件を記述する順番に注意してください。
必ず、①loopCounter＝＝slideLength-1→②loopCounter＜slideLength→③elseの順番に記述してください。
①番と②番を逆に書くと①がfalseの時②も必ずfalseのため処理が実行されません。また、②がtrueになる条件の時は①も必ずtrueになるため②まで処理が回ってこなくなってしまします。

おわりに

今回は、自動で動くスライドに連動してインデックスボタンの色が連動するようにしました。
次回はインデックスボタンを押した時、番号のスライドを表示するようにする方法を説明していきます。
では、今回はこのあたりで(^^)/