- ベストアンサー
複数のリンク画像を一定時間で（各リンク先も）切り替えるには？
画像表示を一定時間で切り替え、同時にそれぞれの画像に別のリンク先を指定したいのです。JavaScriptかスタイルシート、その両方の組み合わせなどの応用になるのではないかと思うのですが、なるべくシンプルな方法をご存知の方、よろしくお願いいたします。
- nozawa5
- お礼率100% (5/5)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"> 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); } </script> <style type="text/css"> .banner { display:none; } </style> </head> <body> <div id="link1"> ここにリンク＆画像の普通のタグ1 </div> <div id="link2" class="banner"> ここにリンク＆画像の普通のタグ2 </div> <div id="link3" class="banner"> ここにリンク＆画像の普通のタグ3 </div> <div id="link4" class="banner"> ここにリンク＆画像の普通のタグ4 </div> <div id="link5" class="banner"> ここにリンク＆画像の普通のタグ5 </div> </body> </html> 色んな方法ありますがHTMLさえ書ければリストの記述ミスが無い方法ならこれかな？ 各 画像リンクは、それぞれをDIVで囲んで link1～ (link + 連続した数値)のIDを付ける。 1個目以外は classやstyle=""で初期非表示にしておく。(サンプルの通り) あとは勝手に順番に表示して最後まで行くとループします。 5000の所が秒数 5000=5秒。 1ページに1個で考えてるサンプルなのでsetInterval()を使っています。 複数使う場合はsetTimeout()を使った方が良いので、わからなければ補足で。 広告バナーなどの自動表示切替 と同じ事ですから、 ネット上に結構サンプルもあるんじゃないかと思います。
その他の回答 (1)
img0からurlの数だけの画像を用意 画像のURLに数字が含まれると× シンプル(?)とはこういう意味？^^; <html> <body> <img id="a" src="img0.jpg" onClick="jp()"> <script> url=['http://www.google.co.jp/','http://www.yahoo.co.jp/','http://www']; n=0; window.onload=function(){setInterval("ch()",5000)} function jp(){location.href=url[$('a').src.replace(/\D/g,'')];} function ch(){n++;n*=(n<(url.length));$('a').src=$('a').src.replace(/\d/,n);} function $(o){return document.getElementById(o);} </script> </body> </html>
お礼
参考にさせていただきました。ありがとうございます。
お礼
うまくいきました。外部ファイルとして、読み込む形にしようと思っていたので、使わせていただきたいと思います。ありがとうございました。