インデックスボタンを押したら画像が切り替わるように変更しよう！！

どうもRyokutyaです。
今回は、前回作ったインデックスボタンをクリックしたら画像が切り替わるように変更を加えていきます。

今回やること

今回は前回作成したインデックスボタンをクリックしたら対応した画像に切り替わるように変更を加えていきます。

コードの紹介

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

今回はJavaScript（JavaScript+jQuery）のみの変更になります。

JavaScript（JavaScript+jQuery）

    //======= index_btnを押した時のスライド制御 =======//

    $('.index_btn').click(function(){
       btnIndex=$('.index_btn').index( $(this) );
        $('.slides').css('transform','translateX('+btnIndex*(-1200)+'px)');
            if( $('#slide_stoper').hasClass('stop') ){
                clearAutoslider();
                loopCounter=btnIndex;
                activeMethod();
            }else{
                clearAutoslider();
                loopCounter=btnIndex;
                activeMethod();
                clearAutoslider=setTimeout(autoslider1,time);
            }
    });

インデックスボタンをクリックした際に動かしたいので、クリックイベント内に処理を記述しています。
クリックしたイベント内の1行目でクリックしたインデックスボタンの番号を変数に格納しています。
クリックイベント内の2行目がスライドの移動に関する記述です。
.slides（画像が入っている<ul>）のcssを書き換えることで表示する画像を変更しています。
.slidesの移動量はクリックしたインデックスボタン×-1200px（画像のサイズ）としています。
これだけで、インデックスボタンをクリックしたとき対応する画像を表示することができます。
3行目以降のif文はオプションです。

オプションについて

クリックイベント2行目までで、インデックスボタンを押した時対応する画像を表示できますが、このままではインデックスボタンを押して画像が切り替わって一定時間が経つと自動でスライドが動いてしまいます。（今回やることの部分の動画を見て頂けるとわかりやすいかと思います。）
画像を見せるだけであれば、これでもいいのですが、場合によってはユーザーがじっくりと見たい（見せたい）状況があるかと思います。
そうゆう場合に備えてオプションを加えています。

html

<!--slide_stoperのclass名にstopを入れるとindexボタンを押した時オートスライドが停止する-->
<div id="slide_stoper" class="stop"></div>

JavaScript（JavaScript+jQuery）

//======= index_btnを押した時のスライド制御 =======//

    $('.index_btn').click(function(){
       btnIndex=$('.index_btn').index( $(this) );
        $('.slides').css('transform','translateX('+btnIndex*(-1200)+'px)');
            if( $('#slide_stoper').hasClass('stop') ){
                clearAutoslider();
                loopCounter=btnIndex;
                activeMethod();
            }else{
                clearAutoslider();
                loopCounter=btnIndex;
                activeMethod();
                clear5=setTimeout(autoslider1,time);
            }
    });

まずhtmlにid＝”slide_stoper”の<div>を用意します。
この<div>はサイトのデザインには一切関係のないもので、JavaScriptの制御のためだけに作っています。
スライドのオプション設定を変えるものだけを1か所にまとめた方がわかりやすいと考えたのでこうしているだけです。（変更するときに自分がわかりやすいd要素にこのid名をつけてください。）
このidを持った要素にclass名でstopを入れた時はインデックスボタンを押すとスライドが自動で動くのをキャンセルします。
class名でstopを入れなかった場合はインデックスボタンを押しても一定時間が経過すると自動でスライドが動くようにできます。
変更したいときhtmlにクラス名を変更するだけで切り替えができるようにしています。

JavaScript(jQuery)にていて
先ほどのクリックイベント内のif文について説明していきます。
if文の条件式は$(‘#slide_stoper’).hasClass(‘stop’)とします。
対象要素.hasClass(‘クラス名’)とすることで（’クラス名’）に入れたクラス名を対象要素が持っているかどうかを調べることができます。
対象要素がクラス名を持っている場合はtrueを、持っていない場合はfalseを返します。
※（’クラス名’）のクラス名の前に.はいらないことに注意してください。
これを利用してif文の条件式としています。
これで、対象要素がstop（クラス名）を持っている場合、持っていない場合を条件分岐しています。
条件がtrueだった場合（クラス名にstopを入れた時）の処理
1行目にclearTimeoutを記述してsetTimeoutをキャンセルすることで自動で動かなくしています。
2行目はactiveMethodでインデックスボタンの色を変更する際に動きを連動させるためにloopCounterの値をbtnIndexの値に上書きしています。
3行目はインデックスボタンの色を連動させるため、activeMethodを呼び出しています。（activeMethodについては「画像が自動で動くスライドを作ろう！」を参照してください）
false（クラス名にstopを入れなかった）の時の処理
1~3行目はtrueの時と同じです。
インデクスボタンを押した後もスライドを自動で動かしたいので、最後にautoslider1をsetTimeoutで呼び出しています。

おまけ

おまけのオプションを1つ紹介します。
すごく簡単に導入できるので、よかったら使ってみてください。
画像にマウスがホバーしているときはスライドが停止し、ホバーが外れると再びスライドが動きだすオプションです。

//======= スライドにホバーした時の制御 =======//

    $(".slides_container").hover(
        function () {
         //ホバー時の動作
         clearAutoslider();
        },
        function () {
        //マウスが離れた時の動作
        clearAutoslider();
        });

特に解説するところもないのですが、ホバーイベントの中にホバー時の処理としてclearTimeoutでsetTimeoutをキャンセルしてスライドが動かないようにしています。
マウスが外れた時の処理として、autoslider1をsetTimeoutで呼び出しています。
動画ではマウスを離してからスライドが動きだすまでに少し時間がかかりすぎている気がするので、setTimeoutのミリ秒の部分で時間を変更してもいいかもしれません。

おわりに

今回までの記事で、スライドの機能や見た目については完成しました。
このままでも十分スライドとして使えるかともいます。
ですが、このままでは、画像のサイズ変更したい場合などにJavaScriptを変更しないといけません。
ですので、次回はスライドの画像サイズの変更をJavaScriptを使って行い、変更が出た時にJavaScriptを変更しなくていいように変更していきます。
では、今回はこのあたりで(^^)/