一定時間で変わる広告

Home>Information>一定時間で変わる広告

[JavaScript][jQuery]

5秒おきに広告を入れ替えて表示します。

→サンプル

ソースコード

HTML

<div id="cm1" style="display:block;border:1px solid #cccccc;padding:5px 10px 5px 10px;"> <p>一番目の広告です。<br> 5秒で次の広告を表示します。</p> </div> <div id="cm2" style="display:none;border:1px solid #cc0000;padding:5px 10px 5px 10px;"> <p>二番目の広告です。<br> 5秒で三番目の広告を表示します。</p> </div> <div id="cm3" style="display:none;border:1px solid #0000cc;padding:5px 10px 5px 10px;"> <p>三番目の広告です。<br> 5秒で一番目の広告を表示します。</p> </div>

HTML部分は、ほぼ前回の「マウスクリックでテキストを入れ替える」と同じです。
今回はクリック判定は必要ないので、p要素に適用していたクラス名（＝change）は削除しています。

JavaScript

<script type="text/javascript"> <!-- $(function(){ var INTERVAL = 5000; setInterval(function(){ for( i=1; i<4; i++ ){ if( i == 3 ){ j = 1; } else{ j = i + 1; } if( $( "#cm" + i ).css( "display" ) != "none" ){ $( "#cm" + i ).hide(); $( "#cm" + j ).show(); break; } } },INTERVAL); }); //--> </script>

JavaScriptに関しても、前回の「マウスクリックでテキストを入れ替える」とほぼ同じです。
同じ部分の解説は省きます。

切り替える時間を設定

var INTERVAL = 5000;

varは変数を宣言するときに使います。変数とは任意の値を格納するための文字列です。
ここでは、INTERVALという変数を宣言し、5000という数値を代入しています。
INTERVAL = 5000; とは、5秒間を意味しています。

一定時間を経過したら実行する

setInterval( function() { ～ }, INTERVAL );

setIntervalはJavaScriptの関数です。
setInterval( 命令, 時間 );
という書式で、「時間」が経過したら「命令」を実行する、という意味です。

これにより、前回ではクリックで実行していた処理を、5秒経過ごとに実行するようにしています。

関連リンク

• クリックした画像を拡大・縮小する（JavaScript/jQuery）
• マウスクリックでテキストを入れ替える（JavaScript/JQuery）
• 一定時間でローテーションする広告(JavaScript/jQuery)
• Informationに戻る

よく読まれている記事

• 右クリックメニューの表示が遅い【Information】
• 画像の一部にリンクを貼る（クリッカブルマップ【Dreamweaver】
• 一定時間でローテーションする広告【JavaScript】
• Dreamweaver【Dreamweaver】
• クリックした画像を拡大・縮小する【JavaScript】

UpDate:2009-11-8

ニュース

更新情報