
動きのあるクロスフェードのスライドショーをつくることができる「CrossSlide」
2013年6月21日jQueryプラグイン活用
画像に動きをつけつつクロスフェードさせるスライドショーをつくる時に有効なプラグインです。
JavaScript
(function($){ $(function() { $('#slideShow').crossSlide( { speed: 20, fade: 1 }, [ { src: 'img01.jpg', dir: 'up' }, { src: 'img02.jpg', dir: 'down' }, { src: 'img03.jpg', dir: 'up' }, { src: 'img04.jpg', dir: 'down' } ] ); }); })(jQuery);
HTML
<div id="slideShow">Loading…</div>
CSS
#slideShow { width:481px; height:240px; margin: 0 auto; }