jQuery Cycle Plugin

jQuery の Cycle プラグインについて。jQuery の Cycle プラグインを使うと、様々なアニメーション動作によるスライドショーを、簡単に作れる。オプションも豊富にあり、細部までカスタマイズできるので、スライドショー以外にも応用できる。

導入

jQuery Cycle Plugin – Downloadより、「 jquery.cycle.all.js 」をダウンロード。

実装例(サンプル)

実装例(サンプル)について

実装例(サンプル)のソースコードについては、こちら

Cycle プラグインの使い方

基本

「jquery.cycle.all.js」を読み込み、「JavaScript」と「HTML」を下記のように書く。

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-cycle' ) .cycle();
} );
// -->
</script>

HTML

<div id="jquery-cycle">
    <img src="画像ファイル1" />
    <img src="画像ファイル2" />
    <img src="画像ファイル3" />
</div>

オプション

よく使うオプション。

fx

スライドが切り替わるアニメーションの種類を指定するオプション。

指定できるアニメーション

speed

スライドが切り替わるアニメーション動作速度を指定するオプション。

timeout

スライド1つ1つの表示時間を指定するオプション。

「0」を指定すると、自動では切り替わらない。

sync

消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。

「0」を指定すると、表示中のスライドが消えてから、次のスライドを表示するアニメーションが始まる。

「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。

random

スライドが切り替わる順番をランダムにするオプション。

next

次のスライドへ移るトリガーとなる要素を指定するオプション。

prev

前のスライドへ移るトリガーとなる要素を指定するオプション。

pager

スライドをページ分けし、ページ番号で切り替えたいときに使用するオプション。

ここで指定した要素内に、ページ・ナビゲーション・コントロール・バーを表示する。

before

切替アニメーションが始まったら呼び出すオプション。

after

切替アニメーションが終わったら呼び出すオプション。

cssBefore

現れる直前のスライドに適用されるスタイルを指定するオプション。

animIn

出現アニメーションに関するスタイルを指定するオプション。

animOut

消えるアニメーションに関するスタイルを指定するオプション。

shuffle

トランプでカードを切り混ぜるようにシャッフルするアニメーションの方向を指定するオプション。

「fx」オプションに「shuffle」を指定したときに使う。

easing

jQuery Easing Plugin の動作を指定するオプション。

コマンド

よく使うコマンド。

toggle

jQuery( '#jquery-cycle' ) . cycle ( 'toggle' );

一時停止と再生を交互に繰り返すコマンド。

スポンサード リンク

カテゴリー: Cycle, JavaScript, jQuery, アニメーション, プラグイン, 画像 パーマリンク