| ポイント |
<![CDATA[
num++;
num %= 4;
document.banner.src = imgURL[num];
setTimeout("changeImg()",10000);
]]>
|
| 説 明 |
バナー画像はsetTimeout()やsetInterval()で一定時間ごとに入れ替えます。しかし、バナーの場合は画像を入れ替えるだけではジャンプ先まで変更することができないため、何枚目の画像を表示しているかどうかを変数（カウンタ）に保存し、ジャンプ先のURLを、あらかじめ配列内に格納しておきます。画像がクリックされたら「javaScript:jump()」により関数を呼び出します。表示する画像がインターネット上にある場合はimgURL配列に、あらかじめURLを指定して設定しておきます。カウンタの値をキーにして配列内のURLを元に画像を入れ替えます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>インターネット上にあるバナー画像を一定時間ごと入れ替える</title>
<script language="JavaScript"><!--
num = 0;
jumpURL = new Array();
imgURL = 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/";
imgURL[0] = "http://www2.ncs.gr.jp/~openspc/banner/0.gif";
imgURL[1] = "http://www2.ncs.gr.jp/~openspc/banner/1.gif";
imgURL[2] = "http://www2.ncs.gr.jp/~openspc/banner/2.gif";
imgURL[3] = "http://www2.ncs.gr.jp/~openspc/banner/3.gif";
function changeImg()
{
num++;
num %= 4;
document.banner.src = imgURL[num];
setTimeout("changeImg()",10000);
}
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!
|
インターネット上にあるバナー画像を一定時間ごと入れ替える