「けどスライドショーってなんだか難しそう」
このようにスライドショーを実装したいけど、難しそうでよくわからないと感じる方も多いはずです。 しかしスライドショーがあるだけでウェブサイトは一気におしゃれになります。
実は難しいと思っていたスライドショーの実装も、案外簡単にできる事はご存知でしたか？
今回の記事では初心者でも即実践できる、スライドショーを実装する方法についてご紹介していきます。
目次
スライドショーとは？
そもそもスライドショーがどのようなものかご存知でしょうか。 画像などが自動的に切り替わって表示される、とてもおしゃれなウェブサイトをご覧になった経験があるはずです。
スライダー、カルーセルとも呼ばれ、ウェブサイトのコンテンツとしては欠かせない要素の1つです。
数秒ごとに自動的に画像が切り替わるものや、ボタンをクリックすることで画像を切り替えるものなど、様々な種類のスライドショーがあります。
このスライドショーを実装するためには、ウェブサイトに動きをつけることのできる、JavaScriptと言うプログラミング言語が使用されます。 まだ学習して間もない方でもスライドショーは簡単に実装することができるため、方法をこの機会にぜひ覚えてみて下さい。
スライドショーの実装方法
それでは実際に、スライドショーの実装方法についてご紹介していきます。 用意するファイルは以下の3つです。
- HTML
- CSS
- JavaScript
それぞれファイルの記述方法と内容について、詳しく解説します。
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> |
ここでは基本的な枠組みを記述します。スライドショーの初めに表示させる画像を、imagタグで表示させています。
CSS
|
1 2 3 4 5 |
img { width: 400px; height: 250px; margin: 50px; } |
CSSは枠組みのレイアウトを決めるコードを記述します。 上記のコードでは、画像の幅や高さ、余白などを指定しています。
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, 1500); </script> |
JavaScriptで実際にスライドショーを実装し、 上記のように記述します。
まず下記の部分で「img_src」という変数を作成し、 表示させたい画像パスを配列形式で代入しています。
|
1 |
const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"]; |
配列について学習している方はわかるかもしれませんが、要素のインデックスは0からカウントします。つまり、img1.jpg＝0・img2.jpg＝1・img3.jpg＝2になるのです。
JavaScriptで空の配列を作成する【JavaScript配列リファレンス】
続いて下記のコードで「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」です。
「num === 2」の部分で変数numを「2」にしているため、 最後の画像を表示させたいということです。 なので次の画像は最初の画像である「0」を指定します。
つまり変数numを「0」に戻して、変数numが2以下であれば下記コードの通りnum に1を足して、次の画像のインデックスを指定します。
|
1 2 3 |
else { num++; } |
その後「getElementById関数」を使用して、 設定したimgタグのidである「slide_img」を取得し、src属性をそれぞれの画像パス名が格納されている「変数 img_src」に変更します。
最後に「setInterval関数」で次の画像を 表示させるまでの速度を指定します。今回は1500ミリ秒に指定したので、1.5秒後に画像が切り替わる設定です。
|
1 |
setInterval(slide_time, 1500); |
上記コード参考に、第一引数に呼び出す関数名を指定して、第二引数にインターバルをミリ秒で指定するということを意識して記述しましょう。
この一連の流れで、スライドショーの実装ができます。
カスタマイズしたスライドショーの実装方法
先ほどシンプルなスライドショーの実装方法をご紹介しましたが、ここからは少しカスタマイズした実装方法についてご紹介していきます。
ランダムで画像を表示
先程ほどのスライドショーは順番に画像が流れますが、ここからは画像をランダムで表示させる記述をご紹介します。
その場合関数のif文を下記のコードに書き換えましょう。
|
1 2 3 4 5 6 |
unction slide_time() { num = Math.floor(Math.random() * img_src.length); document.getElementById("slide_img").src = img_src[num]; } |
Math.floor関数と Math.random関数を使うことで、簡単に画像をランダム表示させることができます。
スライドショーに開始ボタンを設置
続いてスライドショーに開始ボタンを設置する方法についてご紹介します。 通常スライドショーは自動的に画像が流れるのですが、 自身のタイミングで画像を流したいときには開始ボタンを設置すると便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const pics_src = ["img1.jpg","img2.jpg","img3.jpg"]; let num = -1; function start() { setInterval(slideshow_timer,1000); } function slideshow_timer(){ if (num == 2){ num = 0; } else { num ++; } document.getElementById("mypic").src = pics_src[num]; } |
開始ボタンはボタン要素として作成することを覚えておきましょう。HTMLの「onclick属性」を使うことで、 開始ボタンをクリックしたときに関数startが発動されます。
まとめ
今回の記事では、JavaScriptでスライドショーを簡単に実装する方法についてご紹介しました。初心者でも簡単にスライドショーを実装できることがわかったでしょうか。
JavaScriptを使うことで、ウェブサイトにおしゃれな機能を実装することができます。 ウェブ制作の幅が一気に広がりますのでぜひ学習してみましょう。
ProgateでJavaScriptを学ぶメリット・デメリット・勉強法について解説
