画像を自動で追加して、関数を準備しよう！

どうもRyokutyaです。
前回に引き続き、自動で動くスライドの解説をしていきます。
※この記事は前回の記事を読んでいるいただいている前提で話を進めます。まだ前回の記事を読んでいない方は前回記事の「画像が自動で動くスライドを作ろう！」を読んでいただければ、幸いです。

スライドの仕組み

コードの説明をしていく前に、今回作成するスライダーの仕組みを説明します。
今回のスライダー（パターン2）は基本的に前回のスライダー（パターン1）と同じで、画像が格納されている<li>の親要素である<ul>を移動させることで動かしています。

パターン2のスライドは最後のスライドが終わった後「次の画像」として「1枚目の画像」がでてくるようにしています。（④画像が最後までスライドすると1枚目の画像になる）
「最後の画像」の次が「1枚目の画像」になるように、同じ画像を2回配置しています。（2セット）

2回目の「1枚目の画像」がでてきた時点で、<ul>の座標をリセットして1回目の「1枚目の画像」に戻しています。
こうすることで、途切れることなくずっと画像が流れているように見せています。

コードの説明

htmlに画像を追加すると自動でスライドを追加する

画像が途切れることなくスライドしているように、同じ画像を2セット配置していることは先ほど説明しましたが、htmlに2回同じことを記述するのは手間ですし、変更があった時に大変なので、1回記述するだけで自動で2セット目が用意されるようにします。

//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);   
    }

対象要素.cloneNode(引数)で対象要素の複製を作成することができます。
引数にはtrueかfalseを入力します。
引数がtrueの場合は対象要素の子要素も含めて複製し、falseの場合は対象要素のみで子要素は複製しません。
引数を指定しなかった場合はtrueとして処理されます。
全ての画像を複製するためにfor文で繰り返しています。
for文の中身の1行目の文が複製している部分です。
slideCopyRoot（変数）は画像が格納されている<li>の親要素<ul>のことです。
対象要素.children[数字]とすることで、「指定した数字」番目の子要素を取得できます。（0番目から始まることに注意してくだい。）
for文で繰り返すため指定する番号はiとしています。
1行目でだけで複製を作ることはできますが、どこに挿入するかを指定してあげなければ何も起こりません。
ですので、2行目の文で挿入場所を指定しています。
挿入場所の親要素.appendChild(対象要素）とすることで、挿入場所の親要素の子要素として対象要素を挿入することができます。
挿入場所の指定は前回説明した、insertBeforeでも指定できます。

自動で画像を動かす

setTimeout

スライドを自動で動かすために、setTimeoutを使っています。
setTimeoutは指定した時間（ミリ秒）後に1度だけ処理を実行してくれるメソッドです。
setTimeout(関数,ミリ秒)とするこで使用できます。
このsetTimeoutを使用することで、指定ミリ秒後に1回<ul>の位置を変更しています。

setTimeoutの引数にする関数

setTimeoutはsetTimeout(関数,ミリ秒)の形で使うので、指定時間後に実行したい処理を関数にまとめています。

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

Ⅰ.スライドしているように見せるためtransitionを付与する
Ⅱ.スライドを移動させるために<ul>（slides）の座標を変更する
Ⅲ.setTimeoutを呼び出す
Ⅳ.条件分岐を考える
スライドを自動で動かすには、この4つ工程が必要になります。
この4つの工程（処理）を関数（autoslider1）としてひとまとめにしておき、setTimeoutで呼び出すことで、指定時間後にこの処理を実行します。

Ⅰ.スライドしているように見せるためtransitionを付与する

css

.transition{
    transition:transform 1s;
}

JavaScript

 $('.slides').addClass('transition');

「スライドが切り替わるとインデックスボタンが変わる」の時と同じように、cssにあらかじめtransitionを用意しておき、addClassで付与します。
これで<ul>が移動した時、transitionが効きスライドしているように見えます。

Ⅱ.スライドを移動させるために<ul>（slides）の座標を変更する

loopCounter+=1;
$('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');

スライドを移動させるためには、<ul>（slides）を移動させる必要があります。
そのため、JavaScript（jQuery）を使って<ul>（slides)のcssを書き換えています。（2行目）
transform:translateX()の値を書き換えて座標を移動させています。
スライドの移動量は画像が格納されている<li>のwidthと同じにしておくと丁度、次の画像が真ん中に来るように移動します。

画像と画像の隙間は<li>に対してpaddingでとっているため、<li>のwidth分と同じ量だけ動かすだけで、移動できます。<li>と<li>の隙間をmarginでとってしまうとここの計算式でmargin量も考慮しないといけないことに注意してください。

スライド1枚分動かすのに<li>と同じwidth（今回のサイズは1200px）を動かす必要があります。
2枚分動かしたければ、width×2,3枚分動かしたければ、width×3,4枚分なら…となります。

loopCounterについて

loopCounter+=1;
$('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');

1行目に記述してあるloopCounterは現在表示されているスライドが何枚目かをカウントするための変数です。
あらかじめloopCounterをグローバル変数（どこにでも呼び出せる変数）として定義しておきます。
関数（autoslider1）内で呼び出されるごとに+1されるようにしています。

loopCounterは、ページ読み込み時は0になっていますが、一回目のautoslider1（関数）が実行された時、+1されます。

$('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');

この文のloopCounterの部分が1ということなので<ul>-1200px（左側に1200px)移動します。
2回目autoslider1が呼び出されると、loopCounterは+1され2になります。
なので<ul>は2*-1200移動します。(左に2400px）

Ⅲ.setTimeoutを呼び出す

$('.slides').addClass('transition');
loopCounter+=1;
$('.slides').css('transform','translateX('+loopCounter*(-1200)+'px)');
 setTimeout(autoslider1,time);

4行目の部分でsetTimeoutを使ってもう一度autoslider1（関数）を呼び出しています。
これは、setTimeoutが指定時間後に1回だけ処理を行うメソッドだからです。
こうすることで、autoslider1が呼び出されると、関数内の処理を上から順番に処理していき最後にautoslider1が再び呼び出され、上から順番に処理していき…というように無限にループします。
スライドには停止することなく動き続けて欲しいので、わざと無限ループになるようにコードを組んでいます。

おわりに

まだ途中ですが、長くなってしまったので今回はこのあたりまでにします。
次回はⅣ.条件分岐を考えるから説明を再開したいと思います。
ではまた次回(^^)/