jQuery の Cycle で、前後手動切替の水平スクロール・スライドショー

jQuery の Cycle プラグインを使い、水平方向(左右)へスクロールするアニメーションで切り替わるスライドショーにおいて、リンク要素をクリックすることで、次のスライド画像にも、前のスライド画像にも、切り替えられるようにする方法。水平方向(左右)へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollHorz」を指定する。次のスライド画像にも、前のスライド画像にも、切り替えられるようにするには、next オプションと prev オプションを使う。

実装例(サンプル)

<< >>

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

「>>」をクリックすると、右から左へスクロールするアニメーションで、次の画像へ進む。

「<<」をクリックすると、左から右へスクロールするアニメーションで、前の画像へ戻る。

水平方向(左右)へスクロールするアニメーション動作時間は、1秒。

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

読み込み

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

<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( {
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 0,
        sync: 1,
        next: '#jquery-cycle-next',
        prev: '#jquery-cycle-prev'
    } );
} );
// -->
</script>
fx

スライドが切り替わるアニメーションの種類を指定するオプション。

水平方向(左右)へスクロールするアニメーションにするには、「scrollHorz」を指定。

speed

スライドが切り替わるアニメーション動作速度を指定するオプション。

1000ミリ秒を指定した。

timeout

スライド1つ1つの表示時間を指定するオプション。

0ミリ秒を指定すると、自動では切り替わらない。

sync

消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。

「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。

next

次のスライドへ移るトリガーとなる要素を指定するオプション。

prev

前のスライドへ移るトリガーとなる要素を指定するオプション。

CSS

<style>
<!--
#jquery-cycle {
    width: 300px;
    height: 198px;
}
#jquery-cycle img {
    width: 300px;
    height: 198px;
}
#jquery-cycle-nav {
    width: 300px;
    text-align: center;
}
#jquery-cycle-nav a {
    padding: 0 20px;
    border: 1px solid gray;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}
-->
</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-nav"><a id="jquery-cycle-prev" href="#"><<</a> <a id="jquery-cycle-next" href="#">>></a></div>

スポンサード リンク

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