スライドショーJavaScript入門

スライドショーを作成する

では、某アニメ「ル○ン三世」のタイトルで使われていたようなスライドショーを作ってみることにしましょう。 以下の画像をまずダウンロードし、フォルダ名を「img」にしてその中に保存してください。 ファイル名は記入されているもので保存して下さい。

kuro.png	0.png	1.png
2.png	3.png	4.png
5.png	6.png	7.png

ではスライドショーのスクリプトを書いてみましょう。 HTMLファイルをimgフォルダと「同じ場所」に作成します（下図）。

そしてヘッダーに以下のコードを記入してください。

<script>

//画像を格納する配列の作成
var image = new Array();

//配列の各要素を画像に特化して、そのパスを記入
image[0]=new Image();
image[0].src="img/0.png";
image[1]=new Image();
image[1].src="img/1.png";
image[2]=new Image();
image[2].src="img/2.png";
image[3]=new Image();
image[3].src="img/3.png";
image[4]=new Image();
image[4].src="img/4.png";
image[5]=new Image();
image[5].src="img/5.png";
image[6]=new Image();
image[6].src="img/6.png";
image[7]=new Image();
image[7].src="img/7.png";

var cnt=0;

function slidesw()
{

  //getElementByIdが使える場合のみ後の処理をする
  if(document.getElementById)
  {

    //スライド中はボタンを押せなくする
    document.slide.elements[0].disabled=true;

    //id属性が「sd」の画像タグの画像パスを切り替える
    document.getElementById("sd").src = image[cnt].src;

    //一つ画像を表示したらカウント用変数cntの値を＋１にする
    cnt++;
    
    //画像が最後まで表示されたか確認
    if( cnt <= 7 )
    {
      //まだ表示されていなければ、setTimeout()で次の画像を表示する
      var timer1=setTimeout("slidesw()",300);
    }
    else
    {
      //全て表示されていたら、ボタンを押せるようにして、タイマーを停止する
      cnt=0;
      document.slide.elements[0].disabled=false;
      clearTimeout(timer1);
    }
  }
}
</script>

続いてHTMLのBODY内に画像タグとボタンを一つ設置します。

<img src="img/kuro.png" id="sd" width="320" height="240" alt="">
<br>

<form name="slide">
<input type="button" value="開始" onclick="slidesw()">
</form>

＜サンプル＞

スライドショースクリプトの解説

上記のコードについて見ていきましょう。 まず先にHTML部分を見てみたいと思いますが、 スライドさせる画像の最初の1枚を表示しておきます。 今回は別に「kuro.png」を作りましたが、0.pngで代用しても構いません。 そして大事なのは、id属性を付ける事です。 今回は「sd」という名前のidを付けました。

続いてJavaScript部分です。スライドショーにする時には、 画像を先に読み込んでおくとスムーズに表示できます。 ということでヘッダーで画像をプレロード（先読み）する処置をとりました。

先読みの方法ですが、まず画像を格納する配列imageを作成しています。 この配列に今までは文字列や数字を入れましたが、今回は画像を格納します。 画像を格納する場合は、上記スクリプトのように2段階かけて行います。

配列[]=new Image()

配列の要素に画像を作成する（画像オブジェクトと言います）

配列[].src=画像パス

配列の画像のパスを指定します

次に、グローバル変数cntを宣言し、0を代入しておきます。 この変数cntを１つずつ加算して、画像の入った配列を順に表示していきます。

関数slidesw()について見てみましょう。 まず最初にif文でdocument.getElementByIdが使えるか調べています。 （このgetElementByIdはまた別の部分で解説します。 今はスライドショーでのお決まりの方法だと思っておいてください）。 古いブラウザでは使えないことがあるので、最初に確認しておきます。

getElementByIdが使えるなら、if文の中の処理を行います。 最初に、ボタンを禁止状態にしています。 スライド中はボタンを押せなくなります。

次に、画像を切り替える命令文です。 先ほどの「sd」というid属性の付いた画像タグをgetElementByIdで取得し、 その画像パスを切り替えます。切り替えたら変数cntの値を+1しておきます。

document.getElementById("id名").src=画像.src

指定したid名のついた画像タグの画像を切り替えます

そして変数cntの値を再びif文でチェックし、全ての画像が表示されたかどうか確認します。 配列imageの最後の要素は7ですから、それ以下ならまだ画像が残っています。 画像が残っている場合は、setTimeout()を使って再び関数slidesw()を呼び出します。

全ての画像を表示したら、cntの値を元に戻し、再びボタンを押せるようにして、 タイマーを停止します。

今回は画像を全て表示するとスライドショーを停止しました。 もし画像をエンドレスに表示したい場合は、 cntの値を0に戻してsetTimeout()を使って再び関数slidesw()を呼び出せばOKです。