スライドショーとは、画像が一定の時間ごとに切り替わる機能で、JavaScriptの基本知識があればスライドショーを作ること自体難しくありません。
jQueryなどでも簡単に実装できますが、まずは素のJavaScript（Vanilla JSとも呼ばれる）を使って理解を深めることで、他のライブラリやフレームワークを使用するときに役立ちます。
今回は、再生・停止機能ボタンを付けたスライドショーを実装していきます。
デモ
今回は、このようなスライドショーを実際に作っていきます。
HTMLとCSSの準備
JavaScriptの実装の前に、HTMLとCSSの準備をしていきましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beutiful Four Seasons</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<div class="slideshow-container">
<h1>Beutiful Four Seasons</h1>
<img src="./images/picture_1.jpg" id="pics">
<h2 id="pic-title">Enjoy pictures!</h2>
<button id="playButton" onclick="playSlidedeshow();">PLAY</button>
</div>
</body>
</html>スライドショーが始まる前に表示させたい画像のパスをimgタグに記述します。
これとは別に、スライドショーで使用したい画像もいくつか保存しておきましょう。
また、スライド開始ボタンを設置しておきます。buttonのonclick属性にplaySlideshow()という関数を指定していますが、この関数自体はJavaScriptの方で実装していきます。
CSS
h1, h2 {
text-align: center;
font-family: serif;
letter-spacing: 0.2rem;
}
img {
width: 600px;
height: 400px;
margin-left:40px;
}
.slideshow-container {
width: 680px;
height: 600px;
margin: 10px auto 10px auto;
}
button {
margin: auto;
display: block;
font-size: 20px;
background-color: white;
font-family: serif;
}今回はJavaScriptの解説がメインとなるため、CSSはシンプルに設定しています。好みに合わせてサイズや色を調整してください。
まずはここまでの記述で以下のように表示されることを確認します。
JavaScriptでスライドショーを実装
HTMLとCSSの準備ができたら、JavaScriptでスライドショーの実装に移ります。
全体のコード
const picArray = [
{src: './images/picture_2.jpg', title: 'Spring'},
{src: './images/picture_3.jpg', title: 'Summer'},
{src: './images/picture_4.jpg', title: 'Fall'},
{src: './images/picture_5.jpg', title: 'Winter'}
];
let counter = 0;
function changePicture() {
if (counter < picArray.length) {
document.getElementById('pics').src = picArray[counter].src;
document.getElementById('pic-title').innerHTML = picArray[counter].title;
counter++;
} else {
document.getElementById('pics').src = picArray[0].src;
document.getElementById('pic-title').innerHTML = picArray[0].title;
counter = 1;
}
}
let playingID = 0;
function playSlidedeshow () {
if (playingID == 0) {
document.getElementById('playButton').innerHTML = 'STOP';
playingID = setInterval(changePicture, 2000);
} else {
document.getElementById('playButton').innerHTML = 'START';
clearInterval(playingID);
playingID = 0;
}
}スライドショーの機能のポイントは以下です。
- 画像とテキストを切り替える：changePicture関数
- 画像の再生と停止を行う：playSlideshow関数
- スライドショーのタイマーを作る：setInterval・clearInterval
それでは上から順番にコードを解説していきます。
画像の情報を格納する
まずは、画像のパスと画像のタイトルをオブジェクトに格納した配列で用意します。
const picArray = [
{src: './images/picture_2.jpg', title: 'Spring'},
{src: './images/picture_3.jpg', title: 'Summer'},
{src: './images/picture_4.jpg', title: 'Fall'},
{src: './images/picture_5.jpg', title: 'Winter'}
];HTMLで用意した画像とは別に、スライドショー用に4枚の画像を用意しています。必要に応じて画像の枚数を変更してください。
srcには、画像のパスを記述し、titleには、画像と同時に表示したいテキストを記述します。
画像とテキストを切り替える
次に、4枚の画像とテキストを切り替えるための解説です。
let counter = 0; // カウンター変数
function changePicture() {
if (counter < picArray.length) {
document.getElementById('pics').src = picArray[counter].src;
document.getElementById('pic-title').innerHTML = picArray[counter].title;
counter++;
} else {
document.getElementById('pics').src = picArray[0].src;
document.getElementById('pic-title').innerHTML = picArray[0].title;
counter = 1;
} counter変数を作り、値を0に設定します。
let counter = 0;配列要素のインデックスをカウントさせる役割があり、「0→1→2→3」のように0からカウントが始まります。
次に、changePicture関数のif文を見ていきましょう。
if (counter < picArray.length) {
document.getElementById('pics').src = picArray[counter].src;
document.getElementById('pic-title').innerHTML = picArray[counter].title;
counter++;
}if文には、counterの値が配列要素の数より小さい場合という条件式を設定しています。
picArray.lengthは配列の長さとなるため、この場合の値は4です。
また、picArray[counter].srcとpicArray[counter].titleにより、現在のcounterの値と一致する配列要素を表示させることができます。
さらに、counter++とし、counterに1を加えていきます。
else文も見てみましょう。
} else {
document.getElementById('pics').src = picArray[0].src;
document.getElementById('pic-title').innerHTML = picArray[0].title;
counter = 1;
} if分から抜けた場合には、すべての配列要素が表示されたということになるため、一番はじめの要素（インデックス0）を表示させるようにします。
さいごにcounter = 1を記述することで、counterを1に戻します。
これで格納されている画像とタイトルが順番に表示されるようになります。
再生と停止の機能を作る
ユーザーが自由にスライドショーの再生や停止ができるように、もう少し機能を加えていきましょう。
let playingID = 0;
function playSlidedeshow () {
if (playingID == 0) {
document.getElementById('playButton').innerHTML = 'STOP';
playingID = setInterval(changePicture, 2000);
} else {
document.getElementById('playButton').innerHTML = 'START';
clearInterval(playingID);
playingID = 0;
}
}ここではplayingID変数を作り、値を0として用意します。
let playingID = 0;先ほどのcounter変数と似ていますが、この変数にはスライドショーが再生中かどうか記録するための役割があります。
次に、playSlideshow関数のif文を見てみます。
if (playingID == 0) {
document.getElementById('playButton').innerHTML = 'STOP';
playingID = setInterval(changePicture, 2000);
}初期の状態では、ボタンは「PLAY」という表記でしたが、playingIDが0の場合には、「STOP」という停止ボタンの表記に変更します。つまり、スライドショーが再生中の状態です。
さらに、setInterval(changePicure, 2000)で、changePicture関数を2秒ごとに繰り返すように指定します。第二引数に記述する時間を3000にすると3秒ごと、4000にすると4秒ごとに切り替わるようになります。
これにより、ボタンがクリックされるとスライドショーが動くようになります。
再生中
次にelse文です。
} else {
document.getElementById('playButton').innerHTML = 'START';
clearInterval(playingID);
playingID = 0;
}playingIDが0ではなくなったら、ボタンを「START」という再生ボタンの表記に変更します。つまり、スライドショーが停止している状態です。
また、clearInterval(playingID)は、changePicture関数を止める働きをしています。
これにより、ボタンをクリックすると、スライドショーを止めることができるようになります。
停止中
これで、再生・停止ボタン付きのスライドショーが完成しました。
まとめ
今回は、JavaScriptを使ってスライドショーの作り方を解説しました。
配列をカウントするための変数や、機能別に複数の関数などを用意する必要がありましたが、DOM操作やif文などの基本知識があれば実装できます。
さらに機能を加えたものや、スタイルにこだわったスライドショーなど、さまざまな方法で試してみてください。
コメント