jQuery の Cycle プラグインで作るスライドショーにおいて、オプションを使わない、超基本的スライドショー。
実装例(サンプル)





実装例(サンプル)について
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();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle();
} );
// -->
</script>
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>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>