自動的に複数の画像が切り替わるスライドショーの作成方法

ウェブ上で見せたい写真がたくさんある場合、サムネイル画像をたくさん並べておいて好きな画像を手動で拡大してもらう方法もありますが、閲覧者がいちいちクリックしないといけないので手間がかかります。一定秒数ごとに自動的に表示画像が切り替わっていくスライドショーなら、操作の手間なく多数の画像を連続して閲覧できて便利です。

そこで今回は、一定時間(秒数)ごとに自動的に表示画像を次々に変更していくスライドショー機能を、JavaScriptで作成する方法をご紹介いたします。記述する分量は大して多くありません。ほぼコピー&ペーストで使えますのでぜひ試してみて下さい。
 

JavaScriptで作成した画像スライドショーの動作サンプル

本記事で作成する画像スライドショーの動作サンプルは以下の通りです。画像の下にある「開始/停止」ボタンをクリックしてみて下さい。クリック後に1秒間隔で次々に写真が切り替わっていきます。

スライドショー表示領域キャプション


上記のサンプルスライドショーでは、表紙を除いて9枚の写真を用意しています。9枚目まで表示すると1枚目に戻り、「開始/停止」ボタンがクリックされるまで何度でも無限に繰り返して表示します。停止させた後に再度「開始/停止」ボタンを押せば、停止した位置の写真からスライドショーが再開されます。

なお、画像は何枚でも構いません。5枚でも100枚でもいくつでもスライドショーにできます。
 

関連:ライブラリのjQueryを活用!ダイナミックな表示効果を伴う画像スライドショーの作成方法

本記事では、特別なライブラリなどを一切使わずに、必要なJavaScriptソースをすべて直接記述することでシンプルな画像スライドショーを作る方法を解説しています。しかし、JavaScriptの有名ライブラリであるjQueryを活用すれば、もっと派手な表示効果を伴う画像スライドショーを作ることもできます。それらについては、別途以下の関連記事をご参照下さい。

関連記事1:次の画像がふわっと浮き上がってくるスライドショーが作れる
ふわっと切り替わるスライドショー

ふわっと切り替わるスライドショーを簡単に作成できる


複数の画像が数秒間隔で次々にフェイドイン・フェイドアウトを繰り返す、ふわっと表示が切り替わる効果のある画像スライドショーの作成方法を解説。jQueryを使うことで、短いJavaScriptソースで作成できます。

→「複数の画像がふわっと切り替わるスライドショーを作る

 
関連記事2:迫力ある画像切り替え効果がたくさんのスライドショーが作れる
迫力あるスライドショー

迫力あるスライドショーを簡単に作成できる


1枚の画像がバラバラに分解されて切り替わっていくようなダイナミックな表示効果で画像を次々に切り替えていく、とても目を引くスライドショーの作り方を解説。jQueryで作られたSkitterスクリプトを使えば、迫力ある効果を伴った画像スライドショーが簡単に作れます。

→「Skitterで迫力ある効果のスライドショーを作る方法

 
どちらも、画像が切り替わるアニメーション効果がおもしろいスクリプトです。ぜひ比較して試してみて下さい。
 

本記事で作成するJavaScriptによるスライドショーのメリットは

外部のライブラリなどなしで作成できるシンプルなスライドショー

外部のライブラリなどなしで作成できるシンプルな画像スライドショー

次のページから具体的な記述方法を解説する画像スライドショーには、上記の関連記事で紹介しているほどの派手な見た目はありません。表示効果は「画像が一瞬で切り替わるだけ」というシンプルなものです。しかし、以下のメリットがあります。

作成者側のメリット:
  • HTMLとJavaScriptの短いソースを書くだけで作れます。
  • 特別なライブラリなど、外部のファイルを読み込む必要はありません。
閲覧者側のメリット:
  • 自らボタンを押すまで開始されないので、画像を見逃すことがありません。
  • 自らの意思でスライドショーを一時停止させ、じっくり画像を鑑賞することもできます。

それでは、短いJavaScriptを活用して画像スライドショーを作成する方法を見ていきましょう。本記事では下記の通り3種類のスライドショーを用意しています。JavaScriptソースの記述量が最も短くて済む[A]から順にお読み頂く方が分かりやすいでしょう。それぞれにサンプルページを用意していますので、解説と併せてご覧下さい。

【作成するJavaScriptスライドショー3種類】
A. 画像だけを単独で切り替えるシンプルなスライドショーの作成方法 (p.2~4)
      …… HTMLとCSSの書き方(p.2)、JavaScriptの書き方(p.3)、ソースまとめ(p.4)
B. 画像と一緒にキャプションも切り替えるスライドショーの作成方法 (p.5~6)
      …… HTMLとCSSの書き方(p.5)、JavaScriptの書き方(p.6)、ソースまとめ(p.7)
C. 同一ページ内で、個別に動作する複数のスライドショーを掲載できるバージョン (p.8)