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