シンプルな「自動で画像が動くスライド」（完成！）

どうもRyokutyaです。
今回は、「自動で画像が動くスライド」の3回目です。
前回の続きから説明していきます

コードの説明

今回で、もっともシンプルな形の「自動で画像が動くスライド」が完成します。

var slideList=$('.slide');
    var slideLength=slideList.length;

    //htmlにスライドを追加すると自動でスライドを追加する
    var slideCopyRoot=document.getElementById('slide_case');
    for(i=0; i < slideLength; i++){
        var slideCopy=slideCopyRoot.children[i].cloneNode(true);
        document.getElementById('slide_case').appendChild(slideCopy);   
    }
    

    //一番上に自動で移動させる記述
    var slideCase=document.getElementById('slide_case');
    var slideCaseLastChild=document.getElementById('slide_case').lastElementChild;
    var slideCaseFirstChild=document.getElementById('slide_case').firstElementChild;
    slideCase.insertBefore(slideCaseLastChild,slideCaseFirstChild);
    //

    //=================================================//
    //autoslider 
    //=================================================//
    var loopCounter=0;
    var btnIndex=-1;
    var clearAutoslider;
    var time=4000;//スライドが移動する間隔

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

    var autoslider2=function(){
        loopCounter=0;
        clearAutoslider();
        $('.slides').css('transform','translateX(0)');
        clearAutoslider=setTimeout(autoslider1,100);
    }

    clear1=setTimeout(autoslider1,time);//1回目のautoslider1呼び出し

スライドを自動で動かすための工程

Ⅰ.スライドしているように見せるためtransitionを付与する
Ⅱ.スライドを移動させるために<ul>（slides）の座標を変更する
Ⅲ.setTimeoutを呼び出す

Ⅳ.条件分岐を考える

前回説明したⅠ~Ⅲまででスライドは動くようになりましたが、スライドが最後まで到達すると、画像が何もない状態になってしまいます。

何もない状態にならにように、条件分岐を考えていきましょう！

Ⅳ.条件分岐を考える

2セットある画像の最後まで到達すると画像がなくなってしまいます。
この問題を解決するために画像をループさせます。
画像をループさせるには次の画像に移動する前に一度画像の座標をリセットしてスタート地点に戻すことで実現可能です。
今回はループさせるタイミングを2セット目の1枚目の画像がでてきたタイミングで<ul>座標をリセットし、1セット目の1枚目の座標（ページ読み込み時の座標）にしています。
こうすることで、スライドは途切れることなくずっと同じところをループしています。

座標をリセットする際は、transitionを外すことに注意してください。
transitionをつけたままにするとリセットするときスライドが右方向に移動するのが、見えてしまいます。

これらを踏まえたコードが以下のものです。

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

条件を分岐させるためにif文の中に処理を記述しています。
分岐の条件は、loopCounterがslideLengthより小さいときとしています。
slideLength（変数）=$(‘.slide’).length;です。
つまりhtmlに記述した<li>の数のことです。（1セット分のスライド枚数）
※JavaScriptで作ったクローンの枚数は含まれません（2セット目の枚数は含まれません）
今回で言えば画像を5枚用意しているので、slideLengthは5です。
loopCounterは0から始まり、スライドが一回動くごとにカウントアップしていくので、6枚目の画像（2セット目の1枚目の画像）まではtrueの処理（前回説明した、スライドを動かす処理）を実行します。
この時点（6枚目の画像が動き終わった時点）でloopCounterは5です。
loopCounter（5）＞slideLength（5）はfalseとなるので7枚目の画像に移動することなくfalseの処理が実行されます。
falseの処理はtransitionを削除しsetTimeoutを使いautoslider2(関数）を呼び出しています。
ここまでの処理を関数にまとめautoslider1の完成です。

//loopCounterは関数には入れないでグローバル変数として定義
 var loopCounter=0;
 var clear1;
 var clear2;
 var clear3;
 var clear4;
 var clear5;
 var clear6;
//timeはsetTimeoutのミリ秒を統一するために定義してあります。
var time=4000;//スライドが移動する間隔
var autoslider1=function(){
        if( loopCounter < slideLength){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
            clear1=setTimeout(autoslider1,time);
                
        }else{
            $('.slides').removeClass('transition');
            setTimeout(autoslider2,100);
        }
        
    }

autoslider2

var autoslider2=function(){
        loopCounter=0;
        $('.slides').css('transform','translateX(0)');
        clear3=setTimeout(autoslider1,100);
    }

    function clearAutoslider(){
        clearTimeout(clear1);
        clearTimeout(clear2);
        clearTimeout(clear3);
        clearTimeout(clear4);
        clearTimeout(clear5);
        clearTimeout(clear6);
    }

autoslider2（関数）にはautoslider1でfalseだった時の処理をまとめています。
1行目でloopCounterを0にしています。<ul>の位置をリセットした時にloopCounterの数字と<ul>の移動量を対応させるためにloopCounterの値もリセットしています。（<ul>の移動量はloopCounter×-1200pxのためloopCounerの値もリセットする必要があります）
2行目の文はsetTimeoutをキャンセルしています。

clearAutoslider

setTimeOutはclearTimeout(id)とすることで削除することができます。
引数のidはsetTimeoutごとに決まっています。
setTimeoutの返値は固有のidです。
let 変数名=setTimeout(関数名,ミリ秒)とすることで、変数名にsetTimeoutごとのidを保存できます。
autoslider1を複数回呼び出すことによって干渉する恐れがあるので、
autosolider2でclearTimeoutを使って、今までのsetTimeoutを削除しています。
Autoslider1を呼び出すごとに独自のidが設定されるため、呼び出すごとに新たな変数を用意しています。（clear1やclear3など）
clearAutosliderという関数を用意し、各idを格納した変数を使ってclearTimeoutしています。
こうすることで、setTimeoutをキャンセルしたいときにclearAutoslider（関数）を呼び出すだけで、setTimeoutを削除できます。

loopContainerのリセット

3行目の文は<ul>の座標を0にしています。
こうすることで、基準座標（ページが読み込まれた時の位置）に戻ります。
最後にsetTimeoutを使ってautoslider1を呼び出しています。
そしてloopCounterが5になるとautoslider2が呼び出されloopCounterを0にしてautosolider1を呼び出して…の無限ループになります。
autoslider1のfalseの処理でautoslider2を呼び出す時やautosolider2でautosolider1を呼び出すときsetTimeを使っている理由は説明すると長くなるので、割愛させていただきます。
気になる方はJavaScript　非同期処理などで調べてください。
※setTimeoutの指定ミリ秒の最小値（最小遅延）には制約があり、呼び出し間隔の最小値は4ミリ秒と決まっているので注意してください

1回目の呼び出し

ここまでで、autosolider1とautosolider2を定義しましたが、関数は定義しただけでは、何も起こりません。
呼び出して初めて関数内の処理を実行してくれます。
ですので、ページが読み込まれた時にautosolider1を呼び出す記述が必要です。
関数の呼び出しを忘れないように注意してください。

おわりに

今回で自動で動くスライドのもっともシンプルな形は完成しました。
次回以降は、スライドに付属品をつけたり、変更をしやすくするための改良を付け加えていきたいと思います。
それでは、今回はこのあたりで(^^)/