JPEG/PNG画像をアニメーションさせる (GIFアニメの代用)

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows -
Macintosh - -
UNIX - - - - -

解  説  JPEG/PNG画像をアニメーションさせるには連番のファイル名を付けた画像を用意しておきます。あとは画像のsrcプロパティに番号+拡張子で構成されるファイル名を指定します。表示される画像の番号を1ずつ増やしていき、最大枚数になったら0に戻します。これは剰余演算を利用するとiNo %= maxNoのように簡潔に記述する事ができます。
コード <html> <head> <title>JPEG/PNG画像をアニメーションさせる (GIFアニメの代用)</title> <script language="JavaScript"> <!-- maxNo = 5; // アニメーション枚数 iNo = 0; // 最初に表示されている画像番号 imgName = "myIMG"; preImg = new Array(); for (i=0; i<maxNo; i++) { preImg[i] = (new Image()).src; preImg[i] = i+".jpg"; } function anime() { iNo++; iNo %= maxNo; document.images[imgName].src = iNo+".jpg"; } // --></script> </head> <body onLoad="setInterval('anime()',500)"> <img src="0.jpg" width="180" height="120" name="myIMG"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!