jQuery cycle plugin (cycle2)

函數可讓指定的 jQuery 物件的所有子元素產生輪播，並可加入多種動畫變換效果。也可以簡單地只運用修改 html 屬性，而不用撰寫額外的 script 就可以產生輪播。

載入 jQuery library 及 plugin

下載 script 檔

1. jQuery library (需要 1.7 以後版本)
2. cycle2 plugin (英文)

加入 html 片段

<script src="jquery.js"></script>
<script src="jquery.cycle2.js"></script>

cycle 基本用法

html 片段

<div class="jqCycle">
 <ul>
  <li><a href="news1.html"><img src="pic1.png" alt="new1" /></a></li>
  <li><a href="news2.html"><img src="pic2.png" alt="new2" /></a></li>
  <li><a href="news3.html"><img src="pic3.png" alt="new3" /></a></li>
  <li><a href="news4.html"><img src="pic4.png" alt="new4" /></a></li>
 </ul>
</div>

使用 script 方式的片段

$('*.jqCycle>ul').cycle({slides:">li"});

ul 元素的所有子元素 li ，以原先定義的效果 (淡出淡入) 依序輪播。

增加 html 屬性方式的片段 (不用撰寫額外的 script)

<ul class="cycle-slideshow" data-cycle-slides=">li">

不需撰寫 script ，即會自動輪播 *.cycle-slideshow 的所有 li 子元素。

jQuery 指定物件及函數使用可參閱 jQuery 基本用法。

cycle 函數的參數

使用 Javascript Object (JSON) 作為參數。參數的屬性亦可指定在輪播容納區的 html data-cycle-* 屬性，有加 ♦ 符號者，表示屬性可指定在個別輪播元素。

1. slides

   指定輪播片元素，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 ">img" 。如，

   $('*.jqCycle>ul').cycle({slides:">li"});

2. fx

   指定輪播變換效果，以文字名稱表示；原定值為 'fade' 。更多效果以 cycle2 Transition plugin 方式加入。

   1. fade

   2. fadeOut

   3. scrollHorz

   4. none

   亦可指定在個別輪播元素的 data-* 屬性。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz"});
   <li data-cycle-fx="fadeOut">

    

3. speed

   指定效果的變換速度，單位為 ms ；原定值為 500 。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250});

4. timeout

   指定兩個輪播之間的間隔時間，單位為 ms ；原定值為 4000 ，指定 0 表示停止自動輪播。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000});

5. delay

   指定延遲首次變換的開始時間，單位為 ms ；原定值為 0 ；可為負值，表示提前。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,delay:2000});

6. pause-on-hover (pauseOnHover)

   指定鼠標移入輪播元素時是否暫停變換時間；原定值為 false ，不會暫停；也可為「jQuery selector 文字串」，指定附加此 hover 事件的元素。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,pauseOnHover:true});

7. random

   指定輪播元素播放順序是否隨機；原定值為 false ，依 DOM 的順序播放。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,random:true});

8. sync

   指定變換時是否出與進同步 (出與進同時變換) ；原定值為 true ，出與進同步，反之則先出後進。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,sync:false});

9. starting-slide (startingSlide)

   指定輪播首檔出現的元素代號，以零起始 (zero-based) 索引整數表示；原定值為 0 ，由第一個元素開始。如，

   $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,startingSlide:2});

10. next

    指定當作跳至下一元素的按鈕，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-next' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,next:"button#nx"});

11. prev

    指定當作跳至上一元素的按鈕，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-prev' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,prev:"button#pv"});

12. easing

    指定非等速動畫函數名稱 (需要導入 easing plugin)；原定值為 null 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,easing:'easeInOutQuad'});

13. pager

    指定縮圖列的容納區物件，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-pager' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:'*.cycleNavbar'});

14. pager-template (pagerTemplate)

    指定作為縮圖列個別按鈕的元素，以「html 文字串」表示，會成為 pager 屬性指定的物件的子元素；原定值為 '<span>&bull;</span>' ；如果已經有這些元素，以 '' (空字) 表示不再自動加入。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('*.cycleNavbar'),pagerTemplate:''});

15. pager-event (pagerEvent)

    指定附加在縮圖列個別按鈕的事件名稱 (型式) ；原定值為 'click.cycle' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('*.cycleNavbar'),pagerTemplate:'',pagerEvent:'click.cycle focus.cycle'});

16. caption

    指定輪播片標註的容器元素，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-caption' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'*.slideTitle'});

17. caption-template (captionTemplate)

    指定輪播片標註的内容範本；原定值為 '{{slideNum}} / {{slideCount}}' ； {{slideNum}} 表示輪播片編號，{{slideCount}} 表示輪播片總數 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'*.slideTitle',captionTemplate:'共 {{slideCount}} 則'});

18. overlay

    指定輪播片標註的容器元素，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-overlay' 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlay:'*.slideNote'});

19. overlay-template (overlayTemplate)

    指定輪播片標註的内容範本；原定值為 '<div>{{title}}</div><div>{{desc}}</div>' ；{{title}} 表示輪播元素 data-cycle-title 屬性的内容， {{desc}} 表示輪播元素 data-cycle-desc 屬性的内容 。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlayTemplate:'<div>{{title}}</div>'});

20. loop

    指定輪播循環次數；原定值為 0 ；小於 1 表示無限次。如，

    $("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,loop:1});

使用「命令名稱」作為參數

1. 'pause'

   暫停輪播；可使用 'resume' 關鍵字恢復繼續輪播。如，

   $("*.jqCycle>ul").cycle('pause');

2. 'resume'

   恢復播放已暫停的輪播。如，

   $("*.jqCycle>ul").cycle('resume');

3. 'stop'

   停止輪播。如，

   $("*.jqCycle>ul").cycle('stop');

4. 'destroy'

   停止輪播，並移除所有附加事件。如，

   $("*.jqCycle>ul").cycle('destroy');

5. 'next'

   跳至下一元素。如，

   $("*.jqCycle>ul").cycle('next');

6. 'prev'

   跳至上一元素。如，

   $("*.jqCycle>ul").cycle('prev');

7. 'goto'

   跳至指定的元素，以零起始 (zero-based) 索引整數表示。如，

   $("*.jqCycle>ul").cycle('goto',6);

tile 效果參數屬性

下載 script 檔

1. cycle2 Transition plugin (英文)

加入 html 片段

<script src="jquery.cycle2.tile.js"></script>

1. fx

   指定輪播變換效果，以文字名稱表示。

   1. tileSlide

   2. tileBlind

   $("*.jqCycle>ul").cycle({slides:">li",fx:"tileBlind"});

2. tile-count (tileCount)

   分割數量，須指定明確的尺寸 (如寬度) 才有效；原定值為 7。如，

   $("*.jqCycle>ul").cycle({slides:">li",tileCount:12});

3. tile-vertical (tileVertical)

   指定是否垂直分割；原定值為 true。如，

   $("*.jqCycle>ul").cycle({slides:">li",tileCount:12,tileVertical：false});

4. tile-delay (tileDelay)

   指定個別分割的變換時間，單位為 ms ；原定值為 100。如，

   $("*.jqCycle>ul").cycle({slides:">li",tileCount:12,tileDelay：200});

標註 (caption | overlay) 變換效果參數屬性

下載 script 檔

1. cycle2 caption2 plugin (英文)

加入 html 片段

<script src="jquery.cycle2.caption2.js"></script>

1. caption-plugin (captionPlugin)

   指定標註變換效果的 plugin 名稱；目前只有 'caption2' 。

   $("*.jqCycle>ul").cycle({slides:">li",caption:"*.slideTitle",captionPlugin:"caption2"});

2. caption-fx-out (captionFxOut)

   指定要離開的 caption 標註的變換效果；原定值為 'fadeOut'。如，

   $("*.jqCycle>ul").cycle({slides:">li",caption:"*.slideTitle",captionPlugin:"caption2",captionFxOut:"slideUp"});

3. caption-fx-in (captionFxIn)

   指定要進入的 caption 標註的變換效果；原定值為 'fadeIn'。如，

   $("*.jqCycle>ul").cycle({slides:">li",caption:"*.slideTitle",captionPlugin:"caption2",captionFxOut:"slideUp",captionFxIn:"slideDown"});

4. overlay-fx-out (overlayFxOut)

   指定要離開的 overlay 標註的變換效果；原定值為 'fadeOut'。如，

   $("*.jqCycle>ul").cycle({slides:">li",caption:"*.slideTitle",captionPlugin:"caption2",overlayFxOut:"slideUp"});

5. overlay-fx-in (overlayFxIn)

   指定要進入的 overlay 標註的變換效果；原定值為 'fadeIn'。如，

   $("*.jqCycle>ul").cycle({slides:">li",caption:"*.slideTitle",captionPlugin:"caption2",overlayFxOut:"slideUp",overlayFxIn:"slideDown"});

cycle 中的 events (事件)

1. cycle-after

   完成變換到下一幀的事件。

   處理函數

   function(event, option, outgoingSlideEl, incomingSlideEl, forwardFlag)

2. cycle-before

   正要變換到下一幀前的事件。

   處理函數

   function(event, option, outgoingSlideEl, incomingSlideEl, forwardFlag)

3. cycle-finished

   輪播終止的事件，即 loop 指定的循環結束。

   處理函數

   function(event, option)

4. cycle-next

   執行 next 命令後的事件。

   處理函數

   function(event, option)

5. cycle-prev

   執行 prev 命令後的事件。

   處理函數

   function(event, option)

範例

1. 輪播廣告 (含縮圖列)
2. 多組循環輪轉片
3. 輪播中的輪播片

參考資源

• cycle2 plugin 官方網站 (英文)
• tcycle 輕小型 (英文)

• cycle2 transitoin plugin

  • scrollDown (development)
  • scrollLeft (development)
  • scrollRight (development)
  • scrollUp (development)

更新日期： 2013-4-12