スライドショーをJavaScriptで作る方法を解説

HOME
更新日:2013.10.04
HOMEJavaScript入門 > スライドショー

スライドショー

ここからタイマーを使ってどんなことができるか、具体的に見ていくことにしましょう。 最初はスライドショーを作ってみたいと思います。 スライドショーは、一定時間で画像が順に変わっていく機能のことです。

因みにここのページで解説している内容は少し難しいと思います。 理解し難い場合は、DOM編を少し見てからここに戻ってこられると、理解できるかも知れません。

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

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

kuro.png0.png1.png
2.png3.png4.png
5.png6.png7.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の値を+1にする
    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を1つずつ加算して、画像の入った配列を順に表示していきます。

関数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です。