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

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

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

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

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


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

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

関連:もっとダイナミックな表示効果を伴うスライドショーの作成方法

本記事では、特別なライブラリの読み込みなどが一切不要な、短いJavaScriptソースを記述するだけでスライドショー機能を作る方法を解説しています。しかし、JavaScriptの有名ライブラリであるjQueryを使うことで、もっと簡単に、もっと派手な表示効果を伴うスライドショーを作ることもできます。それらについては、別途以下の関連記事をご参照下さい。

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

ふわっと切り替わるスライドショー

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

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


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

迫力あるスライドショー

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

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


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

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

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

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

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

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

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

【作成するスライドショー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)