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

JavaScriptで自動的に替わるスライドショー

一定秒数ごとに自動的に表示画像が切り替わっていく「スライドショー」を作ってみましょう。見せたい写真や画像がたくさんある場合、スライドショーとして表示するとおもしろそうです。(JavaScriptで動作します。)

この記事の担当ガイド

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

スライドショーを作るソースのまとめ

スライドショーを作るすべてのソースです。スタイルシートとJavaScriptはHTMLのhead要素に、本体のHTMLはbody要素内に記述します。

■スタイルシートとJavaScriptソース:

<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>
<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>

■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>

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

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

おわりに

今回は、複数の画像を一定時間おきに自動的に切り替えて表示する「スライドショー」の作り方をご紹介いたしました。 ぜひご活用下さい。

【関連記事】

更新日:2007年07月17日

あわせて読みたい

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

    良かった

    0

    この記事を共有する