ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

JavaScriptで画像のスライドショーを作成する方法

一定秒数ごとに自動的に表示画像が切り替わっていく「スライドショー」機能をJavaScriptで作成する方法をご紹介。開始・停止ボタンも用意して、閲覧者が好きな画像でスライドショーを止めてじっくり鑑賞できるように作ってみます。見せたい写真や画像がたくさんある場合は、ただ並べるだけではなくスライドショーとして掲載してみるのも面白いかもしれません。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

スライドショーを作るHTML・CSS・JavaScriptソースのまとめ

今回作成したスライドショーを構成するすべてのソースを以下にまとめて掲載しておきます。スタイルシートとJavaScriptはHTMLのhead要素に、本体のHTMLはbody要素内に記述して下さい。

HTMLソース:
<div class="photobox">
   <img src="slideshow.jpg" id="slideshow" alt="スライドショー表示領域">
</div>
<div class="controlbox">
   <input type="button" value="- 開始 -" onclick="startshow();">
   <input type="button" value="- 停止 -" onclick="stopshow();">
</div>

JavaScriptソース:
<script type="text/javascript"><!--
   // 画像の数
   var imgs = 16;
   // 切替秒数(ミリ秒)
   var inttime = 1000;
   
   // 関数1★指定番号の画像に差し替える関数
   function showimage(num) {
      var imagename = "./" + num + ".jpg";
      document.getElementById('slideshow').src = imagename;
   }
   
   // 関数2★1番画像から順に表示させる関数
   var imgcount=1;
   function slideimage() {
      if( imgcount > imgs ) {
         imgcount = 1;
      }
      showimage( imgcount );
      imgcount++;
   }
   
   // 関数3★スライドショーを開始する関数
   var slideid;
   function startshow() {
      stopshow();
      slideid = setInterval("slideimage()",inttime);
   }
   
   // 関数4★スライドショーを停止する関数
   function stopshow() {
      clearInterval(slideid);
   }
// --></script>

スタイルシートソース:
<style type="text/css"><!--
   /* スライドショー表示領域 */
   div.photobox {
      text-align: center;
   }
   div.photobox img {
      border: gray 3px solid;
   }
   /* 操作ボタン表示領域 */
   div.controlbox {
      text-align: center;
      margin: 0.3em 0px 1em 0px;
   }
--></style>

以上です。すべてをコピー&ペーストしてHTMLに記述し、表示する画像を用意すれば、「スライドショー」として動きます。

※JavaScriptソースの先頭で、用意した画像の個数を修正するのを忘れないように注意して下さい(4ページ目参照)。
※ソースを修正せずに使う場合は、「画像はHTMLと同じディレクトリに置く必要がある」・「画像形式はJPEGである」点に注意して下さい(5ページ目参照)。
※画像ファイル名は、1から順に連番で「番号だけ」のファイル名でなければならない点にも注意して下さい(3ページ目参照)。

JavaScriptで作成する簡単スライドショー機能

今回は、複数の画像を一定時間おきに自動的に切り替えて表示する「スライドショー」の作り方をご紹介いたしました。ぜひ、試してみて下さい。なお、もっとダイナミックな画像切り替え効果を実現できるスライドショーの作り方などについては、下記の関連記事をご参照下さい。

【スライドショー関連記事】
【関連記事】



更新日:2014年10月14日

(公開日:2007年07月17日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    9

    この記事を共有する