- 各画像リンクは、それぞれをDIVで囲んで 【link + 連続した数値のID】を付ける。
- 1個目以外は CSSで初期非表示にしておく。
- あとは勝手に設定した時間ごとに順番に画像を表示していって、最後まで行くとループする。
- 表示時間の設定は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()だが、1周のみでいい、あるいは時間のかかる処理や設置した数が多いときなどは
setTimeout()を使うのが良い。