【JavaScript入門】即実践できる！スライドショーの作り方

2024年3月29日

Kotono

みなさんこんにちは！Kotonoです。

今回はJavaScriptで画像のスライドショーを作る方法について解説していきたいと思います。

この記事では

スライドショーとは
簡単なスライドショーを作成する方法

といった初歩的な内容から

工夫したスライドショーを作成する方法

など、より応用的な内容に関しても分かりやすく説明していきたいと思います。

スライドショーとは

画像のスライドショーを作るなんて難しそう・・・

と、JavaScript初心者の方はお思いなのではありませんか？しかし実は、ウェブページなどでよく見かける画像のスライドショーなどは、簡単にJavaScriptで作成できてしまうのです。

ある一定期間で画像が自動的に変わるシンプルなスライドショーや、開始ボタンなどが設置されているもの、ランダムに画像が流れるもの、これらすべてJavaScriptで簡単に作ることが出来ます。

簡単なスライドショーの作り方

ではまず最初に、基本的なスライドショーの作り方を学びましょう。今回はある一定期間を過ぎると自動的に画像が切り替わる、シンプルなスライドショーを作りたいと思います。

以下のコードをご覧ください。

【HTML】

【JavaScript】

const pics_src = ["pics/1.jpg","pics/2.jpg","pics/3.jpg"];
let num = -1;


function slideshow_timer(){
  if (num === 2){
    num = 0;
  } 
  else {
    num ++;
  }
  document.getElementById("mypic").src = pics_src[num];
}

setInterval(slideshow_timer, 1000);

上のコードでは、最初に表示させる画像をHTMLタグのimgを使用してWebページに表示させています。

配列pics_srcには表示させたい画像のsrcを文字列として保存します。今回、画像はすべてpicsというフォルダー内に保存したので、このようなパス名となっています。関数slideshow_timerは、スライドショーにおいて画像が入れ替わる処理を行います。

変数numが2であれば、最後の画像（0から数えて2は3個目）を表示させたということなります。その為、次の画像は最初のものである0番目に指定します。すなわち、変数numを0に戻します。反対に変数numが2以下であれば、次の画像に進むだけなので1を足す処理を行うだけです。

そしてgetElementById関数を使用し、先ほど設定したimgタグ内のsrc属性を、次の画像のパス名に変更します。それぞれの画像のパス名は、配列pics_srcに保存されています。

最後にsetInterval関数を使用します。setInterval関数は、第一引数に呼び出したい関数名、第二引数に実行するタイミング（インターバル）を指定します。今回は1000ミリ秒と指定したので、1秒後には次の画像に切り替わるという仕組みです。

setIntervalの基本的な使い方や活用方法については、次の記事で体系的にまとめているので合わせて参考にしてみてください！

【JavaScript入門】setIntervalの使い方まとめ

更新日：2024年3月1日

上のコードを実行すると、以下のような一番目の画像が表示されます。

画像：shutter stock

そしてその1秒後には違う画像に切り替わります。こうして、簡単なスライドショーを作成することができましたね。

工夫したスライドショーの作り方

先ほどは、シンプルで基本的なスライドショーを作成する方法をご紹介しました。

しかし、JavaScriptでスライドショーを作成すると、アレンジの方法が無限に存在します。色々なテクニックを使って、オリジナルのスライドショーを作ることができるのが魅力的ですよね。

このセクションでは、先ほどのサンプルコードをベースに、スライドショーにアレンジを加えていきたいと思います。

開始ボタンを設置する

では、先ほどのスライドショーに開始ボタンを設置してみましょう。先ほどのサンプルコードでは、ブラウザを開くとすぐに画像のスライドショーが始まってしまいます。

しかし、自分のタイミングでスライドショーを再生したい場合には、開始ボタンがあると便利ですよね。それでは、以下のコードをご覧ください。

【HTML】

【JavaScript】

const pics_src = ["pics/1.jpg","pics/2.jpg","pics/3.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内にある「開始ボタン」のコードです。

開始ボタンはボタン要素として作成します。そしてHTMLのonclick属性を使用し、ボタンをクリックしたときに関数startを発動させるように設定しました。start関数は、単純にsetIntervalを包み込んだものになります。

onclickに関する詳しい説明は、以下のリンクを参照してください。

要素をクリックで処理開始! JavaScriptのonclickでイベントを指定

更新日：2024年3月29日

こうすることで、自分の好きなタイミングでスライドショーを開始させることができます。

画像をランダムに流す

今までのサンプルコードでは、表示される画像の順番はあらかじめ決めておいたものでした。すなわち、0番目の画像、1番目の画像、2番目の画像と、順番が入れ替わることはありません。

しかし、ランダムに画像を流したい場合はどうすれば良いのでしょうか。以下のコードをご覧ください。

【HTML】

【JavaScript】

const pics_src = ["pics/1.jpg","pics/2.jpg","pics/3.jpg"];
let num = -1;


function slideshow_timer(){

  num = Math.floor(Math.random()*pics_src.length);

  document.getElementById("mypic").src = pics_src[num];

}

setInterval(slideshow_timer,1000);

これまでの変数numは、0→1→2とカウントアップしていき2に到達すると0に戻りました。しかし、今回はランダムに画像を流したいので、変数numは0から2の数字を毎回ランダムに含む必要があります。

その為に、Math.random関数とMath.floor関数を使用します。Math.random関数は0から1の浮動小数点数をランダムに出力します。

Math.floor関数は小数点以下の値を切り捨てたものを返します。Math.random関数が返した0から1の間の数字に、配列要素のlength(要素数)を掛ければ良いのです。例えば、Math.random関数が0.7を返したとすれば、0.7×3＝2.1になります。2.1より小さい最大の整数は2なので、2番目の画像が選択されるというわけです。