4/8 JavaScriptで画像のスライドショーを作成する方法 [ホームページ作成] All About

A. 画像だけを単独で切り替えるシンプルなスライドショーの完成

これまでに掲載したHTML＋CSS＋JavaScriptソースを表示すると、以下のように見えます。

画像だけを切り替える最もシンプルなスライドショー

実際に動作を試すには、サンプルページ「JavaScriptで作るスライドショーのサンプルA」をご覧下さい。

スライドショーサンプルAのソースまとめ

これまでに記述したソースを一括再掲しておきます。コピー＆ペーストして使ってみる際にご活用下さい。

■CSSソース：
CSSの記述は必須ではありません。

<style type="text/css">
.showbox {
   display: inline-block;
}
.showbox p {
   text-align: center;
}
.showbox img {
   border: 2px solid skyblue;
}
</style>

■HTMLソース：

<div class="showbox">
   <!-- ▼スライドショーを表示する場所 -->
   <p>
      <img src="slideshow.jpg" id="slideshow" alt="スライドショー表示領域">
   </p>
   <!-- ▼スライドショーの制御ボタンを表示 -->
   <p>
      <input type="button" value="－ 開始／停止 －" id="startstopbutton">
   </p>
</div>

■JavaScriptソース：
以下のJavaScriptソースは、先のHTMLソースよりも後に記述して下さい。先のHTMLよりも前に読み込まれてしまうと動きません。

<script type="text/javascript">
// ----------------------------------------------
// ▼設定：スライドショーで見せたい画像ファイル群
// ----------------------------------------------
var imgset = [
   "sky.jpg" ,
   "snowwoods.jpg" ,
   "water.jpg" ,
   "beachsky.jpg" ,
   "greenplain.jpg" ,
   "seashipsky.jpg"      /* 最後にカンマは不要 */
];

// -----------------------------------------------
// ▼関数A：指定画像を順に表示させる
// -----------------------------------------------
var counter = 0;
function slideimage() {
   if( counter >= imgset.length ) {
      // カウンタが画像数よりも大きくなったら0番に戻す
      counter = 0;
   }
   // 対象要素の画像URLを次の画像のURLに切り替える
   document.getElementById('slideshow').src = imgset[counter];
   // カウンタを1増やす
   counter++;
}

// -----------------------------------------------
// ▼関数B：スライドショーを制御
// -----------------------------------------------
var slideid = 0;
function startstopshow() {
   if( slideid == 0 ) {
      // 始まっていなければ始める
      slideid = setInterval(slideimage,1000);   // 1000は切替秒数(ミリ秒)
   }
   else {
      // IDがあれば止める
      clearInterval(slideid);
      slideid = 0;
   }
}

// ▼ボタンクリックに関数を割り当てる
document.getElementById('startstopbutton').onclick = startstopshow;
</script>

必要なソースは以上です。

■グローバル変数に関する注意：
このスライドショーサンプルAでは、ソースと説明を簡単にするために、同一ページ内にはスライドショーを1個しか掲載しないことを前提にしており、カウント用の変数などはすべてグローバル変数にしています。したがって、このままでは同一ページ内に複数個のスライドショーを設置できません。複数の設置を可能にするソースの書き方等については、最後の「サンプルC」をご覧下さい。

それでは、続いて「B. 画像と一緒にキャプションも切り替えるスライドショーの作成方法」を見ていきましょう。