jQuery cycle plugin

函數可讓指定的 jQuery 物件的所有子元素產生輪播，並可加入多種動畫變換效果。

2013 新版 cycle2 plugin 具有更多自行設計的彈性與空間。

載入 jQuery library 及 plugin

下載 script 檔
  1. jQuery library
  2. cycle plugin (英文)
加入 html 片段
<script src="jquery.js"></script>
<script src="jquery.cycle.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();

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

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

如果個別輪播元素的寬度與高度無法明確定型 (如每項內文不同長短) ，最好以 css 在親元素 (Parent Element, 如範例中的 ul ) 指定明確的寬與高。

cycle 函數的參數

使用 Javascript Object (JSON) 作為參數
  1. fx

    指定輪播變換效果，以文字名稱表示；原定值為 'fade' 。

    1. fade
    2. fadeZoom
    3. blindX
    4. blindY
    5. blindZ
    6. cover
    7. uncover
    8. curtainX
    9. curtainY
    10. growX
    11. growY
    12. scrollUp
    13. scrollDown
    14. scrollLeft
    15. scrollRight
    16. scrollHorz
    17. scrollVert
    18. shuffle
    19. slideX
    20. slideY
    21. toss
    22. turnUp
    23. turnDown
    24. turnLeft
    25. turnRight
    26. wipe
    27. zoom
    可指定一個或多個效果，以 , (逗號) 區隔。如，
    $("*.jqCycle ul").cycle({fx:"scrollHorz"});
$("*.jqCycle ul").cycle({fx:"wipe,scrollHorz,scrollVert,uncover"});
    僅指定單一效果，可只以效果名稱作為參數。如，
    $("*.jqCycle ul").cycle("wipe");

    各種變換效果可參閱官方網站展示 (英文)。

  2. speed

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

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250});
  3. timeout

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

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,timeout:3000});
  4. delay

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

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,timeout:3000,delay:2000});
  5. pause

    指定滑鼠游標移入輪播元素時是否暫停變換時間；原定值為 0 ，不會暫停。如，

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,timeout:3000,pause:1});
  6. random

    指定輪播元素播放順序是否隨機；原定值為 0 ，依 DOM 的順序播放；此定義不適用 "shuffle" 效果。如，

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,timeout:3000,random:1});
  7. randomizeEffects

    指定使用多個效果時是否隨機套用；原定值為 1 ，不依指定順序隨機套用。如，

    $("*.jqCycle ul").cycle({fx:"wipe,scrollHorz,scrollVert,uncover",speed:250,randomizeEffects:0});
  8. sync

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

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,sync:0});
  9. startingSlide

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

    $("*.jqCycle ul").cycle({fx:"wipe",speed:250,startingSlide:2});
  10. next

    指定當作跳至下一元素的按鈕的「jQuery 物件」或「jQuery selector 文字串」；原定值為 null ，無指定元素。如，

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

    指定當作跳至上一元素的按鈕的「jQuery 物件」或「jQuery selector 文字串」；原定值為 null ，無指定元素。如，

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

    指定縮圖列的容納區物件，可以是「jQuery 物件」、「jQuery selector 文字串」、「DOM 元素」；原定值為 null ；沒有指定 pagerAnchorBuilder 屬性，此物件會產生 a 子元素的編號型按鈕。如，

    $("*.jqCycle ul").cycle({fx:"scrollHorz",speed:250,pager:'ol#nav-cycle'});
  13. pagerAnchorBuilder

    指定一個函數並 return 作為縮圖列個別按鈕的物件，可以是「jQuery 物件」、「jQuery selector 文字串」、「html 文字串」，此物件為 pager 屬性指定的物件的子元素；函數內建可傳遞輪播元素的 index 及 DOM 元素參數；原定值為 null 。如，

    $("*.jqCycle ul").cycle({fx:"scrollHorz",speed:250,pager:$('*#nav-cycle'),pagerAnchorBuilder:function(i,e){return $('li').eq(i);}});
使用「關鍵字」作為參數
  1. 'pause'

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

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

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

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

    切換暫停與恢復輪播狀態。如，

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

    停止輪播。如，

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

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

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

    跳至下一元素。如，

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

    跳至上一元素。如，

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

範例

  1. 輪播廣告
  2. 新聞跑馬燈
參考資源

更新日期：