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

B-3. スライドショーの動作を作るJavaScriptの書き方

次に、スライドショーとして動作するようJavaScriptソースを書きましょう。表示画像とキャプションを同時に切り替える仕組みを作ります。全体のソースは次のページにまとめて掲載していますし、サンプルページBのソースをご覧頂くこともできますので、ここでは頭から少しずつ分割して掲載しながら解説します。

■前提：
ここで解説するサンプルBでは、ソースを短く済ませて説明を簡単にする目的で、カウント用の変数などをすべてグローバル変数にしています。そのため、同一ページ内にはスライドショーを1個しか掲載しないことが前提になっています(※グローバル変数を必要なだけ用意すれば複数掲載することもできますが、スマートではありません)。同一ページに複数のスライドショーを設置できるように改良したソースについては、記事の最後で紹介します。

■JavaScriptの記述ポイント4つ：
JavaScriptソースは、ほぼコピー＆ペーストで使えます。処理の内容別に、下記の通り4つに分けて紹介します。

B-3-1. スライドショーで見せる画像とキャプションリストの作り方

// ------------------------------------------------------------
// ▼設定：スライドショーで見せたい画像ファイルとキャプション群
// ------------------------------------------------------------
var imgset = [
   ["sky.jpg"        , "1.空"          ] ,
   ["snowwoods.jpg"  , "2.雪の山"      ] ,
   ["water.jpg"      , "3.水面"        ] ,
   ["beachsky.jpg"   , "4.ビーチ"      ] ,
   ["greenplain.jpg" , "5.平原"        ] ,
   ["seashipsky.jpg" , "6.海に浮かぶ船"]  /* ★最後にはカンマ不要 */
];

スライドショーで見せたい画像ファイルとそのキャプションをセットにして、2次元配列の形で1つずつ列挙しています。ここではJPEGファイルを6つしか記述していませんが、個数に制限はありません。10個でも100個でも必要なだけ記述できます。見せたい順番で記述して下さい。画像ファイルやキャプションは引用符で囲み、半角カンマ記号で区切ります。また、「画像ファイルとキャプションのセット」も半角カンマ記号で区切ります。

なお、最終項目の直後(＝上記ソースの「★」部分)にだけはカンマ記号は要りませんので注意して下さい。

■スライドショーで表示する画像の列挙方法：src属性値に指定できる形式なら何でも
ここでは画像のファイル名しか書いていませんが、もし異なるディレクトリ(フォルダ)にある画像を表示させたいなら、相対パスや絶対パスで記述しても構いません。別のサーバにある画像を「http://」などから始める絶対URIで指定することもできます。img要素のsrc属性値に指定できる形式なら、どんな書き方でも構いません。

B-3-2. 画像とキャプションを1つずつ表示させる処理部分の書き方

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

ここでは、呼び出されるたびに異なる画像に切り替える関数「slideimage」を作成しています。すべてコピー＆ペーストすれば済むので、解説は読み飛ばしても問題ありません。処理内容は主に以下の4点です。

■画像の切替処理
getElementById('slideshow').src の部分で、id名に「slideshow」と付けた要素のsrc属性値を変更しています。つまり、表示する画像のURLを変更しているわけです。この処理によって、表示されている画像が切り替わります。先に記述したHTMLソースでid名を「slideshow」以外に変更した場合は、ここも同じ名称に修正する必要があります。

■キャプションの切替処理
getElementById('slidecaption').innerHTML の部分で、id名に「slidecaption」と付けた要素の内容を変更しています。この処理によって、表示されているキャプションの文字列が切り替わります。先に記述したHTMLソースでid名を「slidecaption」以外に変更した場合は、ここも同じ名称に修正する必要があります。

■切り替える画像やキャプションを得る

切り替える画像は、imgset[counter][0] の部分で得ています。これは「2次元配列imgsetの『counter番目の配列』にある1番目の内容を得る」という意味の記述です。
切り替えるキャプションは、imgset[counter][1] の部分で得ています。これは「2次元配列imgsetの『counter番目の配列』にある2番目の内容を得る」という意味の記述です。

JavaScriptの添え字は0番から始まりますので、1番目は0、2番目は1です。
2次元配列imgsetには、B-3-1で記述したように、スライドショーで表示する画像ファイル(URL)とキャプションの文字列が入っています。1回表示するごとに counter++ の記述によってカウンタの値が1ずつ増えます。そのため、次回にこの関数が実行された際には次の画像が表示されるようになります。

■最後まで表示したら最初に戻る
counter変数の値は0から始まり、1回画像を表示するごとに1ずつ増えていきます。しかし、画像の総数よりも大きくなると表示する画像がなくなってしまいます。そこで、 if( counter >= imgset.length ) { …… } の部分で、画像の総数とカウント値を比較して、画像の総数よりも大きくなったら0番に戻すようにしています。画像の総数は imgset.length で得ていますから、総数を直接記述しておく必要はありません。

B-3-3. スライドショー機能を制御する処理部分の書き方

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

ここでは、呼び出されるたびにスライドショーを開始(再開)したり一時停止したりする関数「startstopshow」を作っています。上記で「1000」と記述している部分は、画像を切り替えるまでのミリ秒数です。もし画像を切り替える秒数を変更しないのであれば何も書き換える必要はなく、すべてコピー＆ペーストして使えます。

■一定時間ごとに処理を繰り返すsetIntervalと、それを止めるclearIntervalメソッド
スライドショーを始めるためにsetIntervalメソッドを使い、止めるためにclearIntervalメソッドを使っています。この部分の記述は、サンプルAとまったく同じですからここでの解説は割愛します。詳しくは、本記事の3ページ目にあるA-3-3の解説をご覧下さい。

B-3-4. ボタンクリックでスライドショーが実行されるようにする

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

上記の記述によって、 id="startstopbutton" が割り振られたボタンがクリックされた際に、先ほど作成したstartstopshow関数が実行されるようになります。ボタンのid名を変更している場合は、上記のid部分も修正して下さい。

以上で、スライドショーサンプルB「画像と一緒にキャプションも切り替えるスライドショー」を作るJavaScriptは完成です。

■次は……