Jqueryでスライドショーの作り方（デザイナーでも出来る自作編）

2016年2月29日

jQueryの基礎が理解出来てきた方は、他人が作ったプラグインを使用せずに自作したくなってくるかと思います。

そんな初級から中級へステップアップしたい人へ向けた、jQueryでスライドショーを自作する時の作り方と考え方をわかりやすく解説します。理解しやすくする為にできるだけシンプルにし、変数はあまり使いませんので必要な場合は、適宜変数化してください。

ちなみに今回解説するスライドショーは「スライドするイメージの数がいくつであっても、自動的に判別してくれるタイプ」です。

当記事の発展版として「Jqueryでクロスフェードスライドショーの作り方（デザイナーでも出来る自作編）」という記事も作成しましたので、当ページの基礎が終わったら、是非読んでみて下さい。

ただしこの記事は、ある程度jQueryの基礎を理解している方向けですので、もしjqueryの基礎がまだ怪しいという方は、次の本を是非おすすめします。

この本はドーナツ本と言われており、業界では超有名！私自身もこの本と出会ってjQueryやJavaScriptに対する苦手意識が無くなり、jQueryを自作するってこんなに簡単なんだ！とやる気にさせてくれました。

まずはHTML側のイメージ

<div id="slide">
<img src="mainImg01.jpg">
<img src="mainImg02.jpg">
<img src="mainImg03.jpg">
</div>

簡単ですね、イメージファイル３つをdivで囲っただけのシンプルな構造です。（ここでは割愛しますが、最低限jQuery本体は読み込んで、自作するjsファイルはその後に読み込んでおいてください。）

次にCSSのイメージ

/*スライドする複数イメージをぴったりと重ねます*/
#slide{
position:relative;
}
#slide img{
position:absolute;
left:0;
top:0;
}

シンプルに解説するため装飾は割愛しますが、最低限スライドするイメージを「position」で全て重ねて下さい。

ここからが本番、jQueryコードの解説（番号付き解説）

$(function(){


//（１）ページの概念・初期ページを設定
var page=0;

//（２）イメージの数を最後のページ数として変数化
var lastPage =parseInt($("#slide img").length-1);

//（３）最初に全部のイメージを一旦非表示にします
     $("#slide img").css("display","none");

//（４）初期ページを表示
          $("#slide img").eq(page).css("display","block");

//（５）ページ切換用、自作関数作成
function changePage(){
                         $("#slide img").fadeOut(1000);
                         $("#slide img").eq(page).fadeIn(1000);
};

//（６）～秒間隔でイメージ切換の発火設定
var Timer;
function startTimer(){
Timer =setInterval(function(){
          if(page === lastPage){
                         page = 0;
                         changePage();
               }else{
                         page ++;
                         changePage();
          };
     },5000);
}
//（７）～秒間隔でイメージ切換の停止設定
function stopTimer(){
clearInterval(Timer);
}

//（８）タイマースタート
startTimer();

/*オプションを足す場合はここへ記載*/

});

（１）ページの概念（と全体の大まかな流れ）

まずここが基本となり考え方として最も重要です。スライドするイメージを「ページという概念」で考えます。そして変数名「page（任意の名前）」として登録し、初期値に「０」を代入、つまり最初のスライドイメージを０ページとします。

全体の大まかな流れを解説しますと、このページ０は最初に表示するイメージであり、これに対して「setInterval（インターバル：任意の秒間隔で発火する仕組み）」という既存の関数を使って、任意の秒数毎にページを切り替える自作関数を実行し、最初に作ったpageという変数の値に１プラスしていき、スライドする毎に現在のページ数をカウントアップし、現在のページに対してイメージ表示していくという流れです。

（２）スライドするイメージの数を最後のページ数として変数化

これはスライドするイメージの数がいくつのであっても自動的に対応する為の記述です。「lastPage」という変数を作り、「$("#slide img").length-1」でイメージの数を数えてlastPageに代入します。「-１」しているのは、ページのカウントを０からカウントする考えで統一する為です。また、parseInt()は数字を整数化する既存の関数です。

（３）最初に全部のイメージを一旦非表示に

まずは全部のイメージを（一旦）すべて非表示にします。一旦非表示にしておいて、必要なイメージだけを表示していくという流れです。

これはあらかじめcss側で非表示にしても良いのですが、スライドイメージの動きに関しては、一括してjQueryで制御して、メンテナンスしやすくする狙いです。

（４）初期ページを表示

まずページを読み込んだ際に、最初に表示するイメージ表示します。（最初に１度だけ実行）

$("#slide img").eq(page).css("display","block");

先ほど、全てのイメージを非表示にしたので、.eq(page)で現在のページのイメージ、つまり初期値の０である最初の０ページだけを表示します。

（５）ページ切換用、自作関数作成

次ページへ切り替える為の自作関数"changePage()"をあらかじめ用意します。

$("#slide img").fadeOut(1000);

まず切り替える度に一旦全てのイメージを非表示にしてから

$("#slide img").eq(page).fadeIn(1000);

これで現在のページだけをfadeInで表示するという関数を用意します。

（６）～秒間隔でイメージ切換の発火設定

スライドイメージのエンジン部分と言える部分ですが、〜秒間隔で自動実行する関数、startTimer()関数を自作します。（例では、５秒間隔）

setInterval()という既存の関数で、「〜秒間隔で自動実行する」という仕組みを実現できます。setInterval()の書式は覚えるしかありませんが、この〜秒間隔で実行する内容として、条件分岐で２パターン用意します。

１パターン目は最後のページの場合

（２）でつくった最後のページの場合は、pageをカウントアップさせるのではなく、最初のページに戻す意味で、 page = 0;を代入します。

そして（５）で作った"changePage()"を実行してページを切り替えます。

最後のページ以外のページ

最後のページ以外は、page++;で１ページずつ足していき、同様に"changePage()"を実行してページを切り替えます。

（７）～秒間隔でイメージ切換（インターバル）の停止設定

〜秒間隔で実行する仕組みを、ストップさせる為の関数"stopTimer()"関数を自作します。

（８）タイマースタート

先ほど作ったstartTimer()関数は作って用意しただけでしたので、ここでタイマー「tartTimer()｝関数を実行します。

これで一旦、自動的にスライドする仕組みはできあがりです。

オプション機能追加

オプション的に「次へ」を押すと次の画像を表示し、「戻る」を押すと前のイメージに戻るという機能を追加する方法を解説します。

HTML

<div id="slide">
<img src="mainImg01.jpg">
<img src="mainImg02.jpg">
<img src="mainImg03.jpg">
</div>

<p id="nav-r"><a href="#">次へ</a></p>
<p id="nav-l"><a href="#">戻る</a></p>

先ほどのhtmlに追加で、id="nav-r"のaタグに「次へ」、id="nav-l"のaタグに戻るというシンプルなナビを付けます。

jQuery

//（９）「次へ」をクリック
     $("#nav-r a").click(function() {
     //タイマー停止＆スタート（クリックした時点から～秒とする為）
     stopTimer();
     startTimer();
          if(page === lastPage){
                         page = 0;
                         changePage();
               }else{
                         page ++;
                         changePage();
          };
     });

//「戻る」をクリック
     $("#nav-l a").click(function() {
          //タイマー停止＆スタート（クリックした時点から～秒とする為）
          stopTimer();
          startTimer();
          if(page === 0){
                         page = lastPage;
                         changePage();
               }else{
                         page --;
                         changePage();
          };
     });

（９）「次へ」「戻る」をクリック

「次へ」をクリックすると、まず先ほど作った関数「stopTimer();」「startTimer();」を連続して実行します。これは、スライドが５秒間隔で切り替わっている途中で「次へ」もしくは「戻る」ボタンを押して強制的にイメージを切り替える事になるので、例えばイメージが切り替わってから、３秒後に「次へ」ボタンを押した時に、残り２秒でさらに次のイメージに切り替わるのでは短すぎるので、一旦現在動いている５秒間隔のタイマーをストップして、再度５秒間隔のタイマーを動かすという意味合いです。

次に条件分岐で判断している内容は、if(page === lastPage)」現在のページが最後のページの場合は、ページに０を代入しなさい。その上でchangePage()関数を実行して、ページを切り替えなさいという意味です。
elseで最後のページ以外は、ページをカウントアップさせてから、changePage()関数を実行させます。

「戻る」をクリックする場合も要領は同じですが、現在のページが最初のページの時は、page = lastPageを代入して、最後のページを表示させています。それ以外の場合は、ページを戻るという事で、「page --」でpageを−１引いてから表示する事になります。