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

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

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

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

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

A-3-1. スライドショーで見せる画像リストの作り方

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

スライドショーで見せたい画像を1つずつ列挙します。ここではJPEGファイルを6つしか記述していませんが、個数に制限はありません。10個でも100個でも必要なだけ記述できます。見せたい順番で記述して下さい。画像ファイルは引用符で囲み、半角カンマ記号で区切ります。最後の画像の直後にだけはカンマ記号は要りませんので注意して下さい。

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

A-3-2. 画像を1つずつ表示させる処理部分の書き方

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

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

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

■切り替える画像を得る
切り替える画像は、imgset[counter] の部分で得ています。これは「配列imgsetの『counter番目』の内容を得る」という意味の記述です。配列imgsetには、A-3-1で記述したように、スライドショーで表示する画像ファイル(URL)が入っています。1回表示するごとに counter++ の記述によってカウンタの値が1ずつ増えます。そのため、次回にこの関数が実行された際には次の画像が表示されるわけです。

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

A-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メソッド
スライドショーを始めるために、setIntervalメソッドを使っています。これは、指定した関数を指定した間隔で自動的に実行するメソッドです。以下のように記述して使います。

タイマーID = setInterval( 関数名 , 実行間隔ミリ秒 );

setIntervalの4文字目「I」は大文字のアイです。小文字のエルではないので注意して下さい。読みは「セット・インターバル」です。タイマーIDは、1以上の整数で(他のタイマーIDと重複しないよう)ブラウザ側が自動で生成します。自動実行を止めたい場合の識別に使うので、適当な変数に入れて保持しておきます。

関数「slideimage」(＝先ほど作成した「指定画像を順に表示させる関数A」)を1000ミリ秒間隔で呼び出し、タイマーIDを変数slideidに格納するなら、以下のように記述します。

slideid = setInterval(slideimage,1000);

上記の記述によって、関数「slideimage」が「1秒(＝1000ミリ秒)」間隔で自動実行されます。この秒数は必ず半角数字で記述します。もっとゆっくりにしたい場合は値を大きくします。例えば「3000」にすれば3秒になります。値を小さくしすぎると画像の読み込みが完了する前に切り替わってしまい、何も見えなくなる可能性があるので注意して下さい。

■繰り返し処理を停止するclearIntervalメソッド
setIntervalメソッドで開始した繰り返し処理を停止させるメソッドがclearIntervalです。以下のように記述して使います。

clearInterval( タイマーID );

先ほどと同様に、clearIntervalの6文字目「I」は大文字のアイです。「クリア・インターバル」と読みます。タイマーIDには、setIntervalメソッドで返された数値を指定します。ここでは、変数slideidに格納していましたから、以下のように記述することで止まります。

clearInterval(slideid);

この変数slideidに0ではない数値が入っている場合は「スライドショーが実行されている」ことになります。そこをif文で判別することで、ボタンが押される度に開始・停止を切り替えています。

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

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

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

以上で、スライドショーサンプルA「画像だけを切り替えるスライドショー」を作るJavaScriptは完成です。

■次は……