jQuery Cycle Pluginの使い方 jQuery Cycle Plugin

jQuery Cycle Pluginの使用方法をご紹介しています。
jQuery Cycle Pluginは様々な効果でスライドショーを簡単に実装できるjQueryライブラリです。

  • ※ このライブラリは、jQueryが別途必要です。

公式サイト

ダウンロードと設置

こちらからダウンロードします。
ダウンロードしたJavaScriptファイルを任意の場所に設置します。
※jQueryが設置されていない場合は、こちらからダウンロードして任意の場所に設置してください。

JavaScriptの読み込みと設定

以下を<head>内に記載します。
パスは環境により変更してください。

適用方法

スライドショーにしたい画像をdiv要素などで囲い、設定したIDを付加します。

オプションの設定

スライドショーのオプション設定です。
以下のようなカタチで設定します。
オプションの種類はこちらをご覧ください。
サンプルおよびソースは、効果をスクロールダウン、効果のスピードを0.1秒、
次の画像に切り替わるまでの時間を2秒に設定しています。

ページャーの設置

ページャー機能を実装するための簡単な設置方法です。

【JavaScript】

【HTML】

オプション

※一部のオプションのみ説明しています。

オプション名 初期値 説明
fx fade 効果の変更を行います。
効果の一覧はこちらをご覧ください。
timeout 4000 次の画像に切り替わるまでの時間です。
ミリ秒で指定します。0を指定すると無効になります。
timeoutFn null
continuous 0 切り替わる時間を無視し、次の画像に切り替えます。1にすることにより有効になります。
speed 1000 切り替え効果の速度を変更します。
ミリ秒で指定します。
speedIn null インする切り替え効果の速度を変更します。
ミリ秒で指定します。
speedOut null アウトする切り替え効果の速度を変更します。
ミリ秒で指定します。
next null 次の画像に移動するボタンを設定します。オプションの「timeout」を0に設定した状態で指定します。また、指定する値は要素名(idおよびclass付でもOK)を指定します。
prev null 前の画像に移動するボタンを設定します。オプションの「timeout」を0に設定した状態で指定します。また、指定する値は要素名(idおよびclass付でもOK)を指定します。
pager null ページャー機能を出力する要素名やID名、class名の指定をします。デフォルトでは数値のナビゲーションが出力されます。
pagerEvent click ページャー機能で画像を切り替える時のマウスアクション(トリガー)を指定します。clickやmouseoverなどが指定でき、デフォルトはclickが指定されています。
pagerAnchorBuilder null ページャー機能のユーザー定義関数です。詳しくはこちらをご覧ください。
pauseOnPagerHover 0 ページャーにマウスカーソルをのせた場合に停止するかの設定を行います。trueを設定することにより有効になります。
startingSlide 0 最初に表示する画像を設定します。
開始する画像ではないので注意してください。
0からの番号を指定します。
(2を設定した場合、3枚目の画像を最初に表示します。)
random 0 ランダム再生を行います。1にすることにより有効になります。
pause 0 画像にマウスをのせるとスライドが停止します。1にすることにより有効になります。
autostop 0 スライドが終端に到達した際の繰り返しを停止します。
autostopCount 0 スライドを何回繰り返すかの指定をします。
delay 0 最初のスライド効果が始まるまでの時間を指定します。
ミリ秒で指定します。

その他のオプションは公式サイトをご覧ください。

効果一覧

パソコンや回線環境により動作が重くなる場合があります。

blindX

blindY

blindZ

cover

curtainX

curtainY

fade

fadeZoom

growX

growY

none

scrollUp

scrollDown

scrollLeft

scrollRight

scrollHorz

scrollVert

shuffle

slideX

slideY

toss

turnUp

turnDown

turnLeft

turnRight

uncover

wipe

zoom

all