スライドショーとは、画像が一定の時間ごとに切り替わる機能で、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-slideshow

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秒ごとに繰り返すように指定します。第2引数に記述する時間を3000にすると3秒ごと、4000にすると4秒ごとに切り替わるようになります。

これにより、ボタンがクリックされたら、スライドショーが動くようになります。

再生中

javascript-slideshow

つぎにelse文です。

  } else {
    document.getElementById('playButton').innerHTML = 'START';
    clearInterval(playingID);
    playingID = 0;
  }

playingIDが0ではなくなったら、ボタンを「START」という再生ボタンの表記に変更します。つまり、スライドショーが停止している状態です。

また、「clearInterval(playingID);」は、changePicture関数を止める働きをしています。

これにより、ボタンをクリックすると、スライドショーを止めることができるようになります。

停止中

javascript-slideshow

シンプルですが、再生・停止ボタン付きのスライドショーが完成しました。

まとめ

今回は素のJavaScriptで簡単なスライドショーの作り方を解説しました。

配列をカウントするための変数や、機能別に複数の関数などを用意する必要がありましたが、DOM操作やif文などの基本知識があれば複雑な実装ではありません。

基本的な作り方を理解することができれば、もう少し機能を加えたものや、スタイルにこだわったスライドショーを作ることができるので、さまざまな方法で試してみてください。

JavaScriptの基本をおさらい