Skip to content

jQuery Cycle Plugin 1枚の画像を次々と表示するjQueryのスライドショー

by haruma on 2010.08.02

1枚の画像を次々と表示するスライドショーを実装する、jQueryプラグインのjQuery Cycle Pluginをつかいました。

http://jquery.malsup.com/cycle/
(ダウンロードのリンクは左上に文字リンクがあります)

上のページにデモがありますが、このプラグインは多くの(記事作成時27種類の)トランジションエフェクト(移行効果)をもったスライドショーが実装できます。

設置は簡単です。

head内

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $('.slideshow').cycle();
});
//-->
</script>

body内

<div class="slideshow">
    <img src="images/photo1.jpg" width="200" height="200" />
    <img src="images/photo2.jpg" width="200" height="200" />
    <img src="images/photo3.jpg" width="200" height="200" />
</div>

これだけで、とりあえずスライドショーは設置できます。
これにトランジションエフェクトを加えるには以下のようにします。
トランジションエフェクトを’fade’にする場合。

$('.slideshow').cycle('fade');

または

$('.slideshow').cycle({
  fx: 'fade'
});

トランジションエフェクトには以下の種類が指定できます。
blindX:2つの画像が横方向に入れ替わる
blindY:2つの画像が縦方向に入れ替わる
blindZ:2つの画像が斜め方向に入れ替わる
cover:画像が横から差し込まれる。
curtainX:画像が横に縮まってアウトする。
curtainY:画像が縦に縮まってアウトする。
fade:画像がフェードで入れ替わる。
fadeZoom:画像はフェードアウトしてズームイン。
growX:横に縮まった画像がインしてくる。
growY:縦に縮まった画像がインしてくる。
scrollUp:画像が上に流れる。
scrollDown:画像が下に流れる。
scrollLeft:画像が左に流れる。
scrollRight:画像が右に流れる。
scrollHorz:画像が左に流れる。
scrollVert:画像が下に流れる。
shuffle:トランプをシャッフルするように入れ替わる。
slideX:画像が左に縮まって入れ替わる。
slideY:画像が上に縮まって入れ替わる。
toss:画像が右上に移動してアウト。
turnUp:立方体が下から上に移動するように入れ替わる。
turnDown:立方体が上から下に移動するように入れ替わる。
turnLeft:立方体が右から左に移動するように入れ替わる。
turnRight:立方体が左から右に移動するように入れ替わる。
uncover:画像が横に移動してアウト。
wipe:画像が左上からインしてくる。
zoom:画像がズームしていれかわる。

その他にもオプションが指定できます。

$('.slideshow').cycle({
    fx:      'scrollDown',
    speed:    300,
    timeout:  2000
});

speed:トランジションエフェクトの時間を指定。単位はミリ秒。
timeout:画像が切り替わる時間を指定。単位はミリ秒。
pause:1を指定すると画像にマウスオーバーするとスライドショーが一時停止します。
random:1を指定すると画像をランダムに表示します。
dalay:指定したミリ秒だけスライドを遅れて開始します。負の値も指定できます。
sync:0を指定するとスライドのトランジションが同時に起こらなくなります。

その他、「次へ」「前へ」やページャーででスライドをコントロールすることができます。
詳しくは配布ページのこちらへ。
http://jquery.malsup.com/cycle/int2.html

From → jQuery

No comments yet

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS