
フェードイン・アウトのシンプルスライドショー
2013年3月31日jQueryのみでつくるギミック
フェードイン・アウトでループ展開するシンプルなスライドショーです。
JavaScript
(function($){ $(function() { var imgBox = $('#slideShow'); var fadeSpeed = 1000; var switchDelay = 3000; imgBox.find('img').hide(); imgBox.find('img:first').stop().fadeIn(fadeSpeed); setInterval(function(){ imgBox.find('img:first-child').fadeOut(fadeSpeed) .next('img').fadeIn(fadeSpeed) .end().appendTo(imgBox); },switchDelay); }); })(jQuery);
HTML
<div id="slideShow"> <img src="img01.jpg" width="481" height="319" /> <img src="img02.jpg" width="481" height="319" /> <img src="img03.jpg" width="481" height="319" /> <img src="img04.jpg" width="481" height="319" /> <img src="img05.jpg" width="481" height="319" /> </div>