５歳の息子に話しかけられ、手が離せないので「5分待って」と言うと、「いいよ。いーち、にーい、さーん・・・」と、きっちり300まで延々と大音量でカウントダウンする賢い我が子・・・。 アラフォーシンママの あき です。
今日は、スライドショーのおはなし。
WEBサイトのトップページなどに、大きく画像のスライドショーが表示されているとカッコイイですよね。
画像のスライダーを設置するのって、なんとなく難しそう。と思う方もいるかもしれませんが、実はJavaScriptで簡単に作ることができます。
もちろん、jQueryを使えばより簡単に作ることができますが、素のJavaScriptでも意外と簡単に実装することが可能です。
今回は、JavaScriptを使ったシンプルなスライドショーの作り方をご紹介します。
スライドショーとは
スライドショーとは、画像が自動的に入れ替わって表示される、WEBページでよく見かける表示方法です。スライダーともいいますね。
数秒おきに自動的に画像が入れ替わるものや、ボタンを押すと画像が切り替わるもの、デザイン的に凝ったものなどたくさんの種類のスライドショーがあります。
今回作るのは、ものすごくシンプルなスライドショー。JavaScriptで下のデモようなシンプルなスライドショーを作り、基本的な作り方を理解していきましょう。
＜ DEMO ＞
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>slide_show</title> </head> <body> <img src="img1.jpg" id="slide_img" class="slider" /> </body> </html> |
解説
最初に表示させる画像を、imgタグで表示させます。今回のディレクトリ構成では、htmlファイルと同じ階層に「img1.jpg」「img2.jpg」「img3.jpg」を置いてあります。
CSS
|
1 2 3 4 5 |
img { width: 400px; height: 250px; margin: 50px; } |
解説
特に解説するまでもありませんでした。 デモはCODEPENの表示に合わせてサイズを指定していますが、こちらではPC画面でのテスト表示を想定しています。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"]; let num = -1; function slide_time() { if (num === 2) { num = 0; } else { num++; } document.getElementById("slide_img").src = img_src[num]; } setInterval(slide_time, 1300); </script> |
解説
ではJavaScriptの解説に入っていきます。
まず、img_src という変数を作り、そこに表示させたい画像のパスを配列形式で代入します。
|
1 |
const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"]; |
配列要素のインデックスはゼロから始まるので、
・ img1.jpg ＝ 0
・ img2.jpg ＝ 1
・ img3.jpg ＝ 2
となります。
次に、num という変数を作り、値を数値の「-1」にしておきます。
|
1 |
let num = -1; |
続いて関数をつくります。
|
1 2 3 4 5 6 |
function slide_time() { if (num === 2) { num = 0; } else { num++; } |
関数 slide_time では、スライドショーで画像を入れ替える処理を行います。
今回は画像が3つあるので、最初の画像がインデックス「0」から始まり最後の画像が「2」ですね。なので、if文で
「変数 num」の「2」すなわち最後の画像 が表示されたら、
「変数 num」の「0」すなわち最初の画像 を表示させる。
という処理を書きます。
|
1 2 3 |
if (num === 2) { num = 0; } |
そして、そうではない場合 すなわち「変数 num」が「0」か「1」であれば、次の画像を表示させるので、インクリメントで num に1を足して次の画像のインデックスを指定します。
|
1 2 3 |
else { num++; } |
お次は、getElementById で imgタグの id「slide_img」を取得し、その src属性をそれぞれの画像のパス名が格納されている「変数 img_src」に変更します。
|
1 |
document.getElementById("slide_img").src = img_src[num]; |
最後に、setInterval で次の画像を表示させるまでの速度を指定します。今回は、1.3秒後に表示を切り替える設定にしました。
・第一引数に呼び出す関数名を指定
・第二引数に実行までのインターバルをミリ秒で指定
すればOKです。
|
1 |
setInterval(slide_time, 1300); |
とてもシンプルですが、ちゃんとスライドショーが作れましたね。
スライドショーの画像をランダムに表示
少しだけ応用編をやってみましょう。
画像を順番通りに表示させるのではなく、ランダムに表示させたいという場合もあると思います。その場合は、関数の処理の if文を下記のように変更してみましょう。
|
1 2 3 4 5 6 |
function slide_time() { num = Math.floor(Math.random() * img_src.length); document.getElementById("slide_img").src = img_src[num]; } |
Math.floor関数と Math.random関数を使えば、簡単に画像をランダムに表示させることができます。この組み合わせの書き方は、お決まりのパターンですね。
まとめ
いかがでしたでしょうか。
今回は、JavaScriptを使ったシンプルで簡単に実装できるスライドショーの作り方を解説しました。
基本的な作り方が理解できれば、あとはCSSを駆使していろんなバリエーションのスライドショーを作ることができますので、ぜひ試してみてくださいね。
