これだけシンプルだと設置しやすいjQueryの画像Slideshow[js]

Snook.caより、ものすごくシンプルなjQueryで作るイメージスライドの紹介です。

デモページはこちらから

フェードインやフェードアウトの効果も折り込まれています。

設置方法は、下記のように、表示させたい画像を設置します。

<div class="fadein">
  <img src="./image1.jpg">
  <img src="./image2.jpg">
  <img src="./image3.jpg">
</div>

そしてCSS

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

最後は下記のようなスクリプトを設置するだけです。

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});