Javascriptを使ってリスト形式でバナーをクロスフェードさせる

スペースはないけど伝えたい情報はいっぱいあるという場合、バナーをFlashにしちゃって、それぞれクロスフェードで画像とリンク先を変えるっていうのは有効な手段だと思います。が。やっぱテキスト情報のほうがいいよなぁと思うわけです。
googleがFlash内テキストをクロールしてくれるようになったとは言え、実際どんなもんか分からないですからね…。
ちなみに、googleがFlashをクロールすることに関するQ&Aを日本語訳してくれているサイトを見つけたので、参考までに。
Google Flashインデックス Q&A

ダウンロード

まず、任意要素をクロスフェード表示で切り替えてくれるスクリプトをダウンロードしてきます。
[ Javascript / CSS Crossfader ]

ファイル読み込み

head内でダウンロードしてきたファイルを読み込みます。

<script type="text/javascript" src="js/bsn.Crossfader.js"></script>

HTML記述

HTMLの記述はこんな感じ。

<ul>
 <li id="bnr01"><a href="sample01.html">sample01</a></li>
 <li id="bnr02"><a href="sample02.html">sample02</a></li>
 <li id="bnr03"><a href="sample03.html">sample03</a></li>
</ul>

id 属性値が切り替え設定時に必要なので、忘れずにつけましょう。
んで、↑の記述より後にJavascriptで切り替えの順番とタイミングを記述します。

<script type="text/javascript">
 var cf = new Crossfader( new Array('bnr01' , 'bnr02' , 'bnr03'), 300, 5000 );
</script>

数字は前がフェードエフェクトの時間。後が各要素の表示時間です。
↑の例でいくと、
・フェードエフェクト：300ms
・各要素の表示時間：5000ms

CSS記述

で、CSSでテキスト画像置換でバナーを設置します。
例えばのCSS　初期化されてる前提（初期化について）

ul li {
	width: 200px;
	height: 40px;
	text-indent: -9999px;	
}
	ul li a {
		display: block;
		width: 200px;
		height: 40px;
	}
ul li#bnr01 {background: url(img/bnr01.gif) no-repeat;}
ul li#bnr02 {background: url(img/bnr02.gif) no-repeat;}
ul li#bnr03 {background: url(img/bnr03.gif) no-repeat;}

これで完成。

注意点

クロスフェード対象の要素の後に何か要素を配置する場合の注意点。
クロスフェードの対象にした要素は CSS によって重なっている状態になっています。
そのため、そのままだとこれに続いて配置された要素がクロスフェード要素と重なってしまいます。
なので、続く要素には margin-top を指定するなどして調整してください。