jQueryで簡単画像スライドショー

様々な画像スライドショーがあると思いますが、

こちらの方のやり方がjQueryでは最もシンプルだと

思いましたので抜粋させて頂きます。数行で実装できているので素晴らしいです。

まずはjQuery箇所。いつも通りの読込。

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>

そしてフェードインフェードアウト処理。

// 初期画像のみ表示
$('.in img:gt(0)').hide();

// タイマー処理
setInterval(function() {
// 繰り返し処理
$('.in :first-child').fadeOut().next('img').fadeIn().end().appendTo('.in');
}, 4500);

CSSはこちら。

.in { position:relative; width:500px;  }
.in img { position:absolute; left:0; top:0; }

最後にhtmlはこちら。

<div class="in">
<img src="/img/1.jpg">
<img src="/img/2.jpg">
<img src="/img/3.jpg">
</div>

10行くらいでこのようなスライドショーが実装できちゃいます。