| ポイント |
<![CDATA[
count++;
count %= 4;
document.btn1.src = count + ".gif";
document.btn2.src = count + ".gif";
document.btn3.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;
document.btn1.src = count + ".gif";
document.btn2.src = count + ".gif";
document.btn3.src = count + ".gif";
}
// --></script>
</head>
<body onLoad="setInterval('changeImg()',2000)">
<img src="1.gif" name="btn1"><br>
<img src="1.gif" name="btn2"><br>
<img src="1.gif" name="btn3"><br>
</body>
</html>
]]>
|
| 補足説明 |
この例のように入れ替える数が少ない場合は列記しても構いませんが、入れ替える数が10や20になると適切な方法でなくなります。より多い数の場合は別に例を示してありますので、そちらを参照してください。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
一定時間ごと画像を入れ替える（同じ画像を複数の場所に）