| ポイント |
<![CDATA[
num++;
num %= 4;
document.banner.src = num + ".gif";
setTimeout("changeImg()",5000);
location.href = jumpURL[num];
]]>
|
| 説 明 |
バナー画像はsetTimeout()やsetInterval()で一定時間ごとに入れ替えます。しかし、バナーの場合は画像を入れ替えるだけではジャンプ先まで変更することができないため、何枚目の画像を表示しているかどうかを変数に保存し、ジャンプ先のURLを、あらかじめ配列内に格納しておきます。画像がクリックされたら「javaScript:jump()」により関数を呼び出します。関数内では現在表示されている画像の番号をキーにして配列内に格納してあるURLを参照しlocation.hrefに代入します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>バナー画像を一定時間ごと入れ替える</title>
<script language="JavaScript"><!--
num = 0;
jumpURL = new Array();
jumpURL[0] = "http://www.shiojiri.ne.jp/~openspc/";
jumpURL[1] = "http://game.gr.jp/";
jumpURL[2] = "http://www.yahoo.co.jp/";
jumpURL[3] = "http://www.infoseek.co.jp/";
function changeImg()
{
num++;
num %= 4;
document.banner.src = num + ".gif";
setTimeout("changeImg()",5000);
}
function jump()
{
location.href = jumpURL[num];
}
// --></script>
</head>
<body onLoad="setTimeout('changeImg()',5000)">
<a href="javaScript:jump()">
<img src="0.gif" name="banner">
</a>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
バナー画像を一定時間ごと入れ替える