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行くらいでこのようなスライドショーが実装できちゃいます。

おすすめ記事


コメントを残す




Menu

HOME

 TOP