複数のリンク画像を一定時間で（各リンク先も）切り替えるには？

解決済

質問者：nozawa5
質問日時：2008/03/17 20:20
回答数：2件

画像表示を一定時間で切り替え、同時にそれぞれの画像に別のリンク先を指定したいのです。JavaScriptかスタイルシート、その両方の組み合わせなどの応用になるのではないかと思うのですが、なるべくシンプルな方法をご存知の方、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： arexis
回答日時：2008/03/18 00:37

<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()を使った方が良いので、わからなければ補足で。

広告バナーなどの自動表示切替と同じ事ですから、
ネット上に結構サンプルもあるんじゃないかと思います。

- 3
- 件

通報する

この回答へのお礼

うまくいきました。外部ファイルとして、読み込む形にしようと思っていたので、使わせていただきたいと思います。ありがとうございました。

通報する

お礼日時：2008/03/19 08:27

No.2

回答者： _pipi_
回答日時：2008/03/18 11:59

img0からurlの数だけの画像を用意

画像のURLに数字が含まれると×
シンプル(?)とはこういう意味？^^;
<html>
<body>
<img id="a" src="img0.jpg" onClick="jp()">
<script>
url=['http://www.google.co.jp/','http://www.yahoo.co.j …];
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>