.NET開発者のためのブログメディア
jQueryを使ってWebサイトのスライドショーを自作する方法
jQueryでは、スライドショーを作成するためのプラグインがたくさん用意されています。プラグインを活用すれば簡単にスライドショーを実装できるのですが、ここではあえて「プラグインを使わずに」自作でスライドショーを作成する方法を紹介していきます。カスタマイズもできるので、ぜひ参考にしてみてください。
- SE
- スライドショーを実装できれば、ウェブサイトが一気にカッコよくなりますね！
- PL
- そうですね。一度自分で作っておくと、仕組みが分かるので応用も効きやすいですよ。
実行環境
・macOS Catalina 10.15.5
・Repl.it
目次
スライドショーとは
多くのウェブサイトで使われているスライドショーですが、改めてどういったものか把握しておきましょう。
スライドショーとは、一言でいうと「複数の画像を順番に表示していく機能」です。スライドショーには、一定時間が経つと勝手に画像が切り替わるタイプと、ユーザーが何かアクション（ボタンのクリックなど）を起こすことで画像が切り替わるタイプがあります。
今回は、前者を実装していきます。
基本のスライドショーを自作しよう
さっそく、スライドショーを自作していきましょう。
ここでは以下の流れでスライドショーを作成していきます。
- すべてのスライド（画像）を重ねて非表示にする
使用メソッド：find() - 1番目のスライドをフェードインで表示
使用メソッド：eq() / fadeIn() - 一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示
使用メソッド：eq() / fadeIn() / fadeOut()
3を繰り返す
使用メソッド：each()
では、それぞれ解説していきます。
1. 全てのスライド（画像）を重ねて非表示にする
スライドショーで使用する画像は、実は全て重なっています。重なった画像の表示・非表示を切り替えることで、スライドしているように見せているのです。
コードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <script type="text/javascript" src="script.js"></script> <div class="slide"> <!--画像を用意--> <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_1280.jpg" width="720" height="460"/> <img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_1280.jpg" width="720" height="460"/> <img src="https://cdn.pixabay.com/photo/2014/05/07/06/44/animal-339400_1280.jpg" width="720" height="460"/> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 |
.slide { position: relative; /* 親要素にrelativeを指定 */ } .slide img { position: absolute; /* absoluteで画像を重ねる */ display: none; /* 画像を非表示に非表示 */ } |
これで、画像を重ねて非表示にすることができました。
2. 1番目のスライドをフェードインで表示
次に、1番目のスライド（画像）を表示していきましょう。動的な処理なので、ここからはjQueryの出番です。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { $('.slide').each(function() { // スライド（画像）の数を取得 var $slides = $(this).find('img'), slideNum = $slides.length, idx = 0; // 何番目か // idx番目目の画像をフェードイン $(".slide img").eq(idx).fadeIn(); }) }) |
「find」メソッドで画像の数を取得し、idx番目（最初は0番目）の画像をフェードインで表示しています。
3. 一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示
1枚目（0番目）の画像を表示したあとは、一定時間経つごとに画像を切り替えていきます。
まずは、現在のスライドをフェードアウトし、次のスライドをフェードインする処理を書いていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 次のスライドを表示するメソッド function dispNextSlide() { var nextIdx = currentIdx + 1; // 最後のスライドの場合ははじめに戻る if (nextIdx > (slideNum - 1)) { nextIdx = 0 } // 現在のスライドをフェードアウト $(".slide img").eq(currentIdx).fadeOut(); // 次のスライドをフェードイン $(".slide img").eq(nextIdx).fadeIn(); // インデックスを更新 currentIdx = nextIdx; } |
このメソッドを定期的に実行できるようにします。
|
1 2 |
// 3秒後に次のスライドを表示 setTimeout(dispNextSlide, 3000); |
ここまでで全ての処理が記述できました。
全体のコードは次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
$(function() { $('.slide').each(function() { // スライド（画像）の数を取得 var $slides = $(this).find('img'), slideNum = $slides.length, currentIdx = 0; // 何番目か // 最初の画像をフェードイン $(".slide img").eq(currentIdx).fadeIn(); // 3秒後に次のスライドを表示 setTimeout(dispNextSlide, 3000); // 次のスライドを表示するメソッド function dispNextSlide() { var nextIdx = currentIdx + 1; // 最後のスライドの場合ははじめに戻る if (nextIdx > (slideNum - 1)) { nextIdx = 0 } // 現在のスライドをフェードアウト $(".slide img").eq(currentIdx).fadeOut(); // 次のスライドをフェードイン $(".slide img").eq(nextIdx).fadeIn(); // インデックスを更新 currentIdx = nextIdx; } }) }) |
- SE
- 今までプラグインに頼っていましたが、これなら自作できそうです。
- PL
- 今回紹介したスライドショーは必要最低限の機能なので、好みに合わせてカスタマイズも楽しんでくださいね。
スライドショーでレベルの高いWebサイトを！
jQueryでは、自作でも短いコードでさくっとスライドショーを作成することができます。スライドショーがあるだけで、ウェブサイトのデザイン性が一気に上がるため、ぜひ活用してかっこいいウェブサイトに仕上げてみてください。
参考文献
株式会社シフトブレイン．jQuery最高の教科書．p.135〜137
