シンプルに画像をクロスフェードして表示したい場合に使えるライブラリ。
InnerFade with JQuery
http://medienfreunde.com/lab/innerfade/
普通に順番通りに画像をフェードしていくのはもっと簡単にjQueryのスクリプトでできるんですが、画像をランダム表示するスクリプトを持ち合わせていなかったのでこのライブラリを使いました。
使い方は、jQueryとこのライブラリを読み込んだうえで以下のようにスクリプトを書く。
$(document).ready(
function(){
$(’#visual’).innerfade({
speed: 1500, //フェード中の時間を設定
timeout: 4500, //画像を切り替えるまでの時間を設定
type: ‘random’, //画像をランダムに表示するか順に表示するか指定
containerheight: ‘500px’ //スライドショー領域の高さを指定
});
});
そしてhtmlのスライドショー部分は以下のように書きます。
<ul id=”visual”>
<li><img src=”./images/index/visual01.jpg” /></li>
<li><img src=”./images/index/visual02.jpg” /></li>
<li><img src=”./images/index/visual03.jpg” /></li>
</ul>
これで3種類の画像のランダムスライドショー完成です。