jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、スライドショーを一時停止できるようにする方法。スライドショーを一時停止できるようにするには、toggle コマンドを使う。フェードイン・フェードアウトのアニメーションで切り替えるようにするには、fx オプションに「fade」を指定する。
実装例（サンプル）
一時停止
実装例（サンプル）の動作について
5つの画像を、フェードイン・フェードアウトのアニメーションで、ランダム順に切り替える。
フェードイン・フェードアウトのアニメーション動作時間は、１秒。
「一時停止」をクリックすると、スライドショーが一時停止し、「一時停止」の文字が、「再生」に変わる。
「再生」をクリックすると、スライドショーが再開し、「再生」の文字が、「一時停止」に変わる。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) . cycle( {
fx: 'fade',
speed: 1000,
timeout: 3000,
sync: 1,
} );
jQuery( '#jquery-cycle-toggle' ) . click(function () {
jQuery( '#jquery-cycle' ) . cycle ( 'toggle' );
jQuery( '#jquery-cycle-toggle p' ) . toggle ();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) . cycle( {
fx: 'fade',
speed: 1000,
timeout: 3000,
sync: 1,
} );
jQuery( '#jquery-cycle-toggle' ) . click(function () {
jQuery( '#jquery-cycle' ) . cycle ( 'toggle' );
jQuery( '#jquery-cycle-toggle p' ) . toggle ();
} );
} );
// -->
</script>
- fx
スライドが切り替わるアニメーションの種類を指定するオプション。
フェードイン・フェードアウトのアニメーションにするには、「fade」を指定。
- speed
スライドが切り替わるアニメーション動作速度を指定するオプション。
1000ミリ秒を指定した。
- timeout
スライド1つ1つの表示時間を指定するオプション。
3000ミリ秒を指定した。
- sync
消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。
「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。
- toggle
-
jQuery( '#jquery-cycle' ) . cycle ( 'toggle' ); 一時停止と再生を交互に繰り返すコマンド。
CSS
<style>
<!--
#jquery-cycle {
width: 300px;
height: 198px;
}
#jquery-cycle img {
width: 300px;
height: 198px;
}
#jquery-cycle-toggle {
margin: 5px 0;
width: 300px;
text-align: center;
border: 1px solid gray;
border-radius: 5px;
cursor: pointer;
background-color: #f0f0f0;
}
#jquery-cycle-toggle:hover {
background-color: #e0e0e0;
}
-->
</style>
<!--
#jquery-cycle {
width: 300px;
height: 198px;
}
#jquery-cycle img {
width: 300px;
height: 198px;
}
#jquery-cycle-toggle {
margin: 5px 0;
width: 300px;
text-align: center;
border: 1px solid gray;
border-radius: 5px;
cursor: pointer;
background-color: #f0f0f0;
}
#jquery-cycle-toggle:hover {
background-color: #e0e0e0;
}
-->
</style>
HTML
パスは、それぞれ、画像ファイルの場所を指定する。
<div id="jquery-cycle">
<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-toggle"><p>一時停止</p><p style="display: none">再生</p></div>
<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-toggle"><p>一時停止</p><p style="display: none">再生</p></div>