jQuery の Cycle プラグインで作る基本的スライドショー

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

実装例(サンプル)

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

5つの画像を順番に表示するスライドショー。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

JavaScript

<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>

スポンサード リンク

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