複数のリンク画像を一定時間でリンク先ごと切り替える

  1. 各画像リンクは、それぞれをDIVで囲んで 【link + 連続した数値のID】を付ける。
  2. 1個目以外は CSSで初期非表示にしておく。
  3. あとは勝手に設定した時間ごとに順番に画像を表示していって、最後まで行くとループする。
  • 表示時間の設定はJSの、5000の所が秒数。サンプルは、5000=5秒。…忙しい…^^;
  • サンプルは、奇数画像がGoogle、偶数画像がYahooにリンクしている。

<div id="link1"><a href="http://www.google.com"><img src="images/one.png" alt=""></a></div>
<div id="link2" class="banner"><a href="http://www.yahoo.co.jp"><img src="images/two.png" alt=""></a></div>
<div id="link3" class="banner"><a href="http://www.google.com"><img src="images/three.png" alt=""></a></div>
<div id="link4" class="banner"><a href="http://www.yahoo.co.jp"><img src="images/four.png" alt=""></a></div>
<div id="link5" class="banner"><a href="http://www.google.com"><img src="images/five.png" alt=""></a></div>


.banner { display:none; }


	window.onload = function(){
	var num = 1;
		setInterval(function(){
			document.getElementById('link' + num).style.display = 'none';
			num = document.getElementById('link' + (num+1))? ++num : 1;
			document.getElementById('link' + num).style.display = 'block';
		},5000);  //表示時間設定
	}

※サンプルはsetInterval()だが、１周のみでいい、あるいは時間のかかる処理や設置した数が多いときなどは
  setTimeout()を使うのが良い。

TOP