jQuery の Cycle プラグインについて。jQuery の Cycle プラグインを使うと、様々なアニメーション動作によるスライドショーを、簡単に作れる。オプションも豊富にあり、細部までカスタマイズできるので、スライドショー以外にも応用できる。
導入
jQuery Cycle Plugin – Downloadより、「 jquery.cycle.all.js 」をダウンロード。
実装例（サンプル）
実装例（サンプル）について
実装例（サンプル）のソースコードについては、こちら。
Cycle プラグインの使い方
基本
「jquery.cycle.all.js」を読み込み、「JavaScript」と「HTML」を下記のように書く。
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle();
} );
// -->
</script>
HTML
<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' ); 一時停止と再生を交互に繰り返すコマンド。