最も短いコードで実装出来るイメージスライドショー

Ads

Result

jQuery

//最初の画像以外を非表示にする
$('.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="01.jpg">
  <img src="02.jpg">
  <img src="03.jpg">
</div>
タイトルとURLをコピーしました