2008年10月18日

ローテーションバナー

スポンサード リンク

JavaScriptでバナー広告をローテーション表示
画像を切り替えて表示します

サンプルソース

<html>
<head>
<title></title>
<style type="text/css">
<!--
#adbox { /*広告本体*/
  border: 2px solid #adff2f;
  width : 470px;
 }

.ad { /*バナーのボックス*/
  display: none;
  width : 470px;
 }

-->
</style>

<script type="text/javascript">
<!--
num =0;
//バナーのボックスの IDを配列に格納
var ADarray =
new Array("ad00","ad01","ad02");
var flag ="ad000";//識別のための標識

//ページを読み込んだ時に実行
window.onload = Bannerinit;
function Bannerinit(){
//Mybannerに 配列の num番目の要素を格納
Mybanner=document.getElementById(ADarray[num]);
Mybanner.style.display='block';//Mybanner を表示
if(flag=="ad000"){flag=document.getElementById(ADarray[num+1]);};
flag.style.display='none';//直前に表示したバナーを非表示
flag=Mybanner;flag
num++;
num %= ADarray.length;
//バナーの表示を5秒ごとに切り替え
timer=setTimeout('Bannerinit()',5000);
}

// -->
</script>
</head>
<body>
<div id="adbox">
<div class="ad" id="ad00">ローテーションバナー</div>
<div class="ad" id="ad01">画像が切り替わります。</div>
<div class="ad" id="ad02">画像が一定時間で変わります。</div>
</div>
</body>
</html>

サンプルソースの緑色の文字列の所に画像のURLを入れてください。
赤色のコードを
new Array("ad00","ad01","ad02",ad03) 
<div class="ad" id="ad03">*********</div>
と追加することで いくつでも増やすことができます。
timer=setTimeout('Bannerinit()',5000);//待機時間です。この場合は5秒ごとに
切り替えています。数値を変更すれば早くしたり、遅くしたりできます。

posted by javaScript at 18:08 | 大阪 ☀ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。