一定時間で画像を切り換える

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

実例

例文

<img src="ita.gif" name="sushi">

<script type="text/javascript">
img = new Array("ita.gif","ikura.gif","ebi.gif","maguro.gif","toro.gif","uni.gif"); //*1
count = -1; //*2
imgTimer();

function imgTimer() {
	//画像番号
	count++; //*3
	//画像の枚数確認
	if (count == img.length) count = 0; //*4
	//画像出力
	document.sushi.src = img[count]; //*5
	//次のタイマー呼びだし
	setTimeout("imgTimer()",1000); //*6
}
</script>

解説

複数の画像を用意しておき、一定間隔で自動的に画像を変更します。

（*1）複数のファイルを配列変数imgに入れておきます。

（*2）変数countを準備しています。

（*3）変数countに1を足します。

（*4）配列変数imgの要素の数が画像の数なので、変数countがその数に達したら０に戻します。要素の数が6個の場合、変数countは0～5を繰り返します。

（*5）画像を表示します。

（*6）1秒後にユーザー関数imgTimerを呼びだします。これにより同じ処理を繰り返すことになります。時間の指定は1/1000秒単位になっています。

応用 - ページ背景

ページの背景全体を変更する場合は、(*5)でBODYを指定します。

document.body.style.backgroundImage = "url("+img[count]+")";

応用 - コメント表示

コメントを付けて同時に変更したい場合は、コメントの表示場所（*1）と配列変数（*2）を用意し、画像と同じタイミングで出力（*3）します。

追加するのは赤字の部分です。

<img src="ita.gif" name="sushi">
<div id="comment"></div> //*1

<script type="text/javascript">
img = new Array("ita.gif","ikura.gif","ebi.gif","maguro.gif","toro.gif","uni.gif");
com = new Array("なにもない","イクラ","エビ","マグロ","トロ","ウニ"); //*2
count = -1;
imgTimer();

function imgTimer() {
	//画像番号
	count++;
	//画像の枚数確認
	if (count == img.length) count = 0;
	//画像出力
	document.sushi.src = img[count];
	//コメント出力
	document.getElementById("comment").innerHTML = com[count]; //*3
	//次のタイマー呼びだし
	setTimeout("imgTimer()",1000);
}
</script>

（*1）<div>タグでコメントの出力場所を作ります。

（*2）配列変数comに画像に対応したコメントを用意します。

（*3）コメントを出力します。

応用 - 同じファイルを再読込

WEBカメラから送られてくる画像の場合、ファイル名は同じで画像が上書きされます。
ファイル名が同じなのでブラウザはキャッシュファイルを表示するため、見ていても画像はいつまでも替わりません。
そこで、画像のファイル名に「?」を付けて後ろにデータ（検索文字列）を付け足すことで、URLに変化を与えることでファイルを読み直すことができます。

（更新）

<img src="nnjcam.jpg" name="webcam"><br>（<span id="update"></span>更新）

<script type="text/javascript>
cam = new Image();
cam.src = document.webcam.src;
webcamTimer(); //*1

function webcamTimer() {
	var now = new Date();
	document.webcam.src = cam.src + "?" + now.getTime(); //*2;
	document.getElementById("update").innerHTML = now.getHours() + "時" + now.getMinutes() + "分"; //*3
	setTimeout("webcamTimer()",60000); //*4
}
</script>

（*1）ページの読込時に最初のタイマーを呼び出します。ページ読込後に呼び出したいときは、これを消して、<body>タグ内に「onLoad="webcamTimer()"」と記述します。

（*2）画像のファイル名の後ろに処理中の時間をデータとして付けています。これによって画像のファイル名を違うものに見せかけて、新しく画像を読み込ませることができます。

（*3）画像を読み込んだ時間を表示します。

（*4）1分後に「webcamTimer()」を呼び出しさせます。1/1000秒単位で時間指定します。

戻る