そういや今日発売日だったなぁ～，とコンプティークのサイト (
コンプティーク.com) に行ったときのこと．
先日うちのブログでも貼り付けたらっきーBlogのバナーが時間で切り替わっているではありませんか．これは是非採用せねば！と思ってソースを覗いてみたら，案外少量のコピペだけで実現出来ました．てことでメモ．
まず <head>～</head> の部分に
<style type="text/css">
<!--
.bn { /*バナーのボックス*/
display: none;
width : 140px;
}
-->
</style>
<script type="text/javascript">
<!--
num =0;
//バナーのボックスの IDを配列に格納
var ADarray = new Array("bn00","bn01","bn02","bn03");
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;
//バナーの表示を５秒ごとに切り替え
timer=setTimeout('Bannerinit()',5000);
}
-->
</script>
と書いて，次に <body>～</body> の部分に
<div class="bn" id="bn00"><a href="http://lucky-blog.com/"><img src="http://lucky-blog.com/user/banner_tower/konata.jpg" width=160 height=600 alt="らっきーBlog" border=0></a></div>
<div class="bn" id="bn01"><a href="http://lucky-blog.com/"><img src="http://lucky-blog.com/user/banner_tower/tsukasa.jpg" width=160 height=600 alt="らっきーBlog" border=0></a></div>
<div class="bn" id="bn02"><a href="http://lucky-blog.com/"><img src="http://lucky-blog.com/user/banner_tower/kagami.jpg" width=160 height=600 alt="らっきーBlog" border=0></a></div>
<div class="bn" id="bn03"><a href="http://lucky-blog.com/"><img src="http://lucky-blog.com/user/banner_tower/miyuki.jpg" width=160 height=600 alt="らっきーBlog" border=0></a></div>
と書いてやれば OK．
どうしてこれで切り替えが出来るのかはサッパリ分かりませんがｗ
一つ気になるのが，ページを開いた直後は体感で分かるほど長く画像が表示されない時間があること．画像だけを貼り付けていたときはこんなことはなかったし，どうもこのブログに貼り付けた場合だけこうなるようなので，やっぱり JavaScript の問題な気がします．しかし JavaScript には明るくないので修正のしようがない罠… orz
あと少し実験して分かったのが，ヘッダ部分に書いた .bn { ～ } の部分を削除すると，まず最初 4 つのバナーが全部表示されて，そして上から順に 1 つずつ消えていくということ．残り 1 枚になったら，そこからは従来通りに切り替わっていきます．どうしてそうなるのかは先ほど同様よく分かりません．