No.1ベストアンサー
- 回答日時:
<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()を使った方が良いので、わからなければ補足で。
広告バナーなどの自動表示切替 と同じ事ですから、
ネット上に結構サンプルもあるんじゃないかと思います。
この回答へのお礼
お礼日時:2008/03/19 08:27
うまくいきました。外部ファイルとして、読み込む形にしようと思っていたので、使わせていただきたいと思います。ありがとうございました。
No.2
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- ニコニコ動画 【Premiere Pro】をお使いの方 カット作業を他動画に反映することはできますか? 1 2022/05/18 16:27
- その他(パソコン・周辺機器) ウインドウズ10のログオフ画面に現れる画像について教えて下さい ログオフをしてログイン待ちの画面にな 1 2023/05/19 21:37
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- Excel(エクセル) Excel2019 マクロを使用し画像を貼り付けした際のリンク切れについて 2 2022/11/15 16:14
- その他(ブログ) なぜ、ホームページが削除されても、そのホームページ上の画像のリンク先がリンク切れになる場合 5 2023/07/15 10:24
- マウス・キーボード HEIYO Surfaceぺんの使用方法を教えてください 2 2023/04/09 10:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
読み込んだQRコードをフォーム...
-
表示・非表示のスクリプトで、...
-
マウスを乗せるとメニュー表示
-
バッチファイルでカウントアッ...
-
removeAttribute()メソッドで削...
-
タブで開いてさらにタブ内をア...
-
console.log結果をhtmlで表示し...
-
折りたたみ部分にアンカーでリ...
-
createElementで作成した要素を...
-
多次元配列を連想配列へ変換したい
-
HTMLタグに複数のクラスを設定...
-
取得した要素がインライン要素...
-
javascriptでスタイルを動的に...
-
getElementByIdの戻り値がnull...
-
document.getElementById( ).st...
-
CSSで指定したwidthをマウスで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報