| ポイント |
<![CDATA[
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」のようにします。 |
| サンプル |
<![CDATA[
<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!
|
一定時間ごと画像を大量に入れ替える（同じ画像を複数の場所に）