| ポイント |
<![CDATA[
count1 = 0;
count2 = 0;
timer1 = 0;
timer2 = 0;
function changeImg()
{
timer1++;
timer2++;
if ((timer1 % 15) == 0)
{
count1++;
count1 %= 4;
document.btn1.src = "a" + count1 + ".gif";
}
if ((timer2 % 20) == 0)
{
count2++;
count2 %= 4;
document.btn2.src = "b" + count2 + ".gif";
}
}
<body onLoad="setInterval('changeImg()',100)">
]]>
|
| 説 明 |
まず、入れ替える画像のファイル名を工夫し「連番+拡張子」にしておきます。count1++でカウントを増やし、count1 % = 4で剰余を求めます。4は表示する画像の枚数です。10枚あるならば10となります。異なる画像の場合はファイル名の「連番＋拡張子」の連番の前にaやbなどのアルファベットを付けておきます。このアルファベットと「連番＋拡張子」を全部連結してファイル名とし画像のURLとします。それぞれ個別の間隔で表示させるには個別にカウンタを用意し加算していきます。剰余演算(%演算子)を利用して余りが0になった場合にのみ画像を更新するようにします。あとはsetTimeout()かsetInterval()を使って定期的に関数を呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>一定時間ごと画像を入れ替える（複数箇所に異なる画像［それぞれ異なる間隔］）</title>
<script language="JavaScript"><!--
count1 = 0;
count2 = 0;
timer1 = 0;
timer2 = 0;
function changeImg()
{
timer1++;
timer2++;
if ((timer1 % 15) == 0)
{
count1++;
count1 %= 4;
document.btn1.src = "a" + count1 + ".gif";
}
if ((timer2 % 20) == 0)
{
count2++;
count2 %= 4;
document.btn2.src = "b" + count2 + ".gif";
}
}
// --></script>
</head>
<body onLoad="setInterval('changeImg()',100)">
<img src="a1.gif" name="btn1">
<img src="b1.gif" name="btn2">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
一定時間ごと画像を入れ替える（複数箇所に異なる画像［それぞれ異なる間隔］）