京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

HOME > Jqueryでスライドショーの作り方(デザイナーでも出来る自作編)

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

2016年2月29日

slide

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

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

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

まずはHTML側のイメージ

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

次にCSSのイメージ

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

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

(1)ページの概念(と全体の大まかな流れ)

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

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

(2)スライドするイメージの数を最後のページ数として変数化

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

(3)最初に全部のイメージを一旦非表示に

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

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

(4)初期ページを表示

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

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

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

(5)ページ切換用、自作関数作成

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

$(“#slide img”).fadeOut(1000); 

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

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

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

(6)~秒間隔でイメージ切換の発火設定

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

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

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

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

そして(5)で作った”changePage()”を実行してページを切り替えます。

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

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

(7)~秒間隔でイメージ切換(インターバル)の停止設定

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

(8)タイマースタート

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

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

オプション機能追加

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

HTML

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

jQuery

(9)「次へ」「戻る」をクリック

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

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

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

まとめ

以上で「Jqueryでスライドショーの作り方」の説明は終わりですが、この「ページの概念」の考え方が理解できれば、これを応用する事で、いろいろなパターンを作る事ができると思いますので、一度試してみて、理解を深めてみてはいかがでしょうか?


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー