jQueryでシンプルなフェードスライドショーを自作する事始め【WordPress】

ここでは jQuery でシンプルなクロスフェードスライドショーを自分で作りたいというあなたの為に、どうやって作っていけばいいのか？という事を解説します。

ウェブサイトでよく写真が自動的に切り替わっていくスライドショーをよく見かけると思います。

これをあなたのウェブサイトに導入するには jQuery プラグインを使ったり、WordPress のプラグインを使う方法が一番手っ取り早いです。

しかしこれらは必要以上の機能が備わっている事が多く、導入する事でサイトが重くなってしまう事もあります。

実はスライドショーって中身を見れば意外と単純な仕組みで動いています。作ろうと思えば以外と簡単に作れてしまいます。極めてシンプルなクロスフェードスライドショーの作り方を解説するので、まずはここから挑戦してみましょう。

目次 [hide]

1 HTML部分
2 CSS部分
3 jquery部分
4 動作デモ
5 おわりに

HTML部分

1<div class="slideshow">
2    <img src="visual1.jpg" />
3    <img src="visual2.jpg" />
4    <img src="visual3.jpg" />
5</div>

スライドショーにしたい画像を img タグで指定して、div タグで囲っているだけの極めて単純な構造です。

`1`	`<script` `src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>`

そして head タグ内には jQuery 本体を読み込むのを忘れないようにしましょう。WordPress のテーマによっては既に読み込まれている場合があります。

CSS部分

1.slideshow img{
2    position: absolute;
3    display: none;
4}

img タグに対して「position:absolute;」で全ての画像を重ねています。そして「display:none;」で最初は画像を非表示にしておきます。

jquery部分

1$(window).load(function() {
2    var imgs = $(".slideshow").children("img");
3    var nums = imgs.length;
4    var count = 0;
5    var sec = 5000;
6 
7    $(".slideshow img").eq(count).fadeIn(1000);
8    setInterval(slide, sec);
9 
10    function slide(){
11        if(count >= (nums-1)){
12            count = 0;
13            $(".slideshow img").eq(count).fadeIn(1000);
14            $(".slideshow img").eq(nums-1).fadeOut(1000);
15        }else{
16            $(".slideshow img").eq(count).fadeOut(1000);
17            $(".slideshow img").eq(count +1).fadeIn(1000);
18            count = count + 1;
19        }
20    }
21});

シンプルなクロスフェードスライドショーならこれだけで動きます。

最初の「$(window).load(function()」はページが読み込まれたら動かすという意味です。

2行目の「var imgs = $(".slideshow").children("img");」は slideshow クラスで指定した div タグの中にある img 要素を取得します。

3行目の「var nums = imgs.length;」はスライドショーにする画像がいくつあるか数えます。

4行目の「var count = 0;」は現在表示している画像が何番目かを記録する変数です。

5行目の「var sec = 5000;」は何秒ごとに画像を切り替えるかミリ秒で指定します。1秒なら1000です。

6行目の「$(".slideshow img").eq(count).fadeIn(1000);」は最初の画像を表示しています。

7行目の「setInterval(slide, sec);」は sec に入っている間隔ごとに slide 関数を実行するという意味です。

9行目の「if(count >= (nums-1)){」は、最後の画像になったら最初に戻すという処理が以下に続きます。

10行目の「count = 0;」は最初に戻すので、何枚目かを記録する変数をゼロに戻します。

11行目の「$(".slideshow img").eq(count).fadeIn(1000);」は最初の画像をフェードインします。

12行目の「$(".slideshow img").eq(nums-1).fadeOut(1000);」は最後の画像をフェードアウトします。nums にマイナス1しているのは、プログラムでは1番目が0から始まるからです。

13行目の「}else{」は最後の画像以外の時の処理が以下に続きます。

14行目の「$(".slideshow img").eq(count).fadeOut(1000);」は現在表示している画像をフェードアウトします。

15行目の「$(".slideshow img").eq(count +1).fadeIn(1000);」は次の画像をフェードインさせます。

16行目の「count = count + 1;」は次の画像に移る為に count をプラス1します。

以上です。

動作デモ

動作デモはこちらに用意しました。

おわりに

画像の幅や高さを指定したり、全画面でスライドショーをしたい場合は CSS で幅・高さを指定してください。

一番シンプルなスライドショーができたので、ここから機能を追加していくのが学習にも良いと思います。