jQuery の Cycle プラグインを使った、左上から右下へ向かって拭うようなアニメーションで切り替わるスライドショーにおいて、スライド切替アニメーション中とスライド表示中に表示するテキストを指定する方法。スライド切替アニメーション中に表示するテキストを指定するには、before オプションを使う。スライド表示中に表示するテキストを指定するには、after オプションを使う。before オプションとafter オプションで、切替アニメーション前後にテキストを表示する関数を呼び出す。左上から右下へ向かって拭うようなアニメーションで切り替えるようにするには、fx オプションに「wipe」を指定する。
実装例（サンプル）
実装例（サンプル）の動作について
5つの画像を、左上から右下へ向かって拭うようなアニメーションで、順番に表示する。
スライド切替アニメーション中は、スライド画像の下に「スライド画像を、切り替えています。」と表示。
スライド表示中は、スライド画像の下に「スライド画像を、表示しました。」と表示。
1つの画像の表示時間は、５秒。
左上から右下へ向かって拭うようなアニメーション動作時間は、２秒。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<script type="text/javascript" src="jquery.cycle.all.js"></script>
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle( {
fx: 'wipe',
speed: 2000,
timeout: 5000,
sync: 1,
before: jqueryCycleBefore,
after: jqueryCycleAfter,
} );
} );
function jqueryCycleBefore() {
jQuery( '#jquery-cycle-output' ) . html( 'スライド画像を、<b style="color: red";>切り替え</b>ています。' );
}
function jqueryCycleAfter() {
jQuery( '#jquery-cycle-output' ) . html( 'スライド画像を、<b>表示</b>しました。' );
}
// -->
</script>
- fx
スライドが切り替わるアニメーションの種類を指定するオプション。
左上から右下へ向かって拭うようなアニメーションにするには、「wipe」を指定。
- speed
スライドが切り替わるアニメーション動作速度を指定するオプション。
1000ミリ秒を指定した。
- timeout
スライド1つ1つの表示時間を指定するオプション。
3000ミリ秒を指定した。
- sync
消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。
「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。
- before
切替アニメーションが始まったら呼び出すオプション。
jqueryCycleBefore 関数を呼び出している。
- after
切替アニメーションが終わったら呼び出すオプション。
jqueryCycleAfter 関数を呼び出している。
CSS
<!--
#jquery-cycle {
width: 300px;
height: 198px;
}
#jquery-cycle img {
width: 300px;
height: 198px;
}
#jquery-cycle-output {
width: 300px;
text-align: center;
background: #e0e0e0;
}
-->
</style>
HTML
パスは、それぞれ、画像ファイルの場所を指定する。
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
<div id="jquery-cycle-output"></div>