一定時間ごと画像を大量に入れ替える(同じ画像を複数の場所に)


動作ブラウザ 【 IE:4.0  NN:3.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × - -
Macintosh × - × - -
UNIX - - - - - × - - -
Dreamcast - - - - - - - - - - -

ポイント count++; count %= 4; for (i=1; i<=10; i++) document.images["btn"+i].src = count + ".gif"; <body onLoad="setInterval('changeImg()',2000)">
説  明 一定時間ごと画像を入れ替えるにはsetTimeout()かsetInterval()を使います。入れ替える画像のファイル名を工夫し「連番+拡張子」にしておきます。count++でカウントを増やし、count % = 4で剰余を求めます。4は表示する画像の枚数です。10枚あるならば10となります。複数画像を同時に入れ替えるには、imgタグのname属性で名前を付けておき「document.["名前"+番号].src = 入れ替える画像URL」のようにします。
サンプル <html> <head> <title>一定時間ごと画像を大量に入れ替える(同じ画像を複数の場所に)</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; for (i=1; i<=10; i++) document.images["btn"+i].src = count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="1.gif" name="btn1"> <img src="1.gif" name="btn2"> <img src="1.gif" name="btn3"> <img src="1.gif" name="btn4"> <img src="1.gif" name="btn5"> <br> <img src="1.gif" name="btn6"> <img src="1.gif" name="btn7"> <img src="1.gif" name="btn8"> <img src="1.gif" name="btn9"> <img src="1.gif" name="btn10"> <br> </body> </html>
補足説明 なし

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

写真素材 PIXTA