jQuery の Cycle プラグインを使い、水平方向（左右）へスクロールするアニメーションで切り替わるスライドショーにおいて、スライド画像にカーソルを合わせると、「<<」と「>>」が現れ、スライド画像の右側をクリックすると、次のスライド画像へ切り替わり、スライド画像の左側をクリックすると、前のスライド画像へ切り替わるようにする方法。水平方向（左右）へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollHorz」を指定する。次のスライド画像にも、前のスライド画像にも、切り替えられるようにするには、next オプションと prev オプションを使う。
実装例（サンプル）
実装例（サンプル）の動作について
スライド画像にカーソルを合わせると、半透明の「<<」と「>>」が現れる。
スライド画像の右側をクリックすると、右から左へスクロールするアニメーションで、次の画像へ進む。
スライド画像の左側をクリックすると、左から右へスクロールするアニメーションで、前の画像へ戻る。
水平方向（左右）へスクロールするアニメーション動作時間は、１秒。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<script type="text/javascript" src="jquery.cycle.all.js"></script>
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) . cycle( {
fx: 'scrollHorz',
speed: 1000,
timeout: 0,
sync: 1,
next: '#jquery-cycle-next',
prev: '#jquery-cycle-prev'
} );
jQuery( '#jquery-cycle-wrap' ) . hover(
function() { jQuery( '#jquery-cycle-nav' ) . fadeIn(); },
function() { jQuery( '#jquery-cycle-nav' ) . fadeOut(); }
);
} );
// -->
</script>
- fx
スライドが切り替わるアニメーションの種類を指定するオプション。
水平方向（左右）へスクロールするアニメーションにするには、「scrollHorz」を指定。
- speed
スライドが切り替わるアニメーション動作速度を指定するオプション。
1000ミリ秒を指定した。
- timeout
スライド1つ1つの表示時間を指定するオプション。
0ミリ秒を指定すると、自動では切り替わらない。
- sync
消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。
「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。
- next
次のスライドへ移るトリガーとなる要素を指定するオプション。
- prev
前のスライドへ移るトリガーとなる要素を指定するオプション。
CSS
<!--
#jquery-cycle-wrap {
position: relative;
width: 300px;
height: 198px;
}
#jquery-cycle {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 198px;
}
#jquery-cycle img {
width: 300px;
height: 198px;
}
#jquery-cycle-nav {
display: none;
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 198px;
text-align: center;
}
#jquery-cycle-nav a {
float: left;
width: 150px;
height: 198px;
display: block;
text-decoration: none;
}
#jquery-cycle-prev {
font-size: 20px;
text-align: left;
}
#jquery-cycle-next {
font-size: 20px;
text-align: right;
}
#jquery-cycle-prev span, #jquery-cycle-next span {
padding: 0 10px;
background: #ffffff;
filter: alpha( opacity=50 );
-moz-opacity: 0.50;
opacity: 0.50;
}
-->
</style>
HTML
パスは、それぞれ、画像ファイルの場所を指定する。
<div id="jquery-cycle-nav">
<a id="jquery-cycle-prev" href="#"><span><<</span></a>
<a id="jquery-cycle-next" href="#"><span>>></span></a>
<div style="clear: both;"></div>
</div>
<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>