簡単にできる! JavaScriptでスライドショーを作る方法

5歳の息子に話しかけられ、手が離せないので「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を駆使していろんなバリエーションのスライドショーを作ることができますので、ぜひ試してみてくださいね。