標籤：c style class blog http a
jquery.cycle.js是jquery的一個外掛程式，主要用來實現千奇百怪的圖片轉場效果---當然，不是圖片也能切換，只是它經常被用來做圖片切換而已；這個外掛程式總共有27種效果，是非常好的外掛程式，用到手機版開發是很好的外掛程式來的；
當然jquery.cycle.js的強大遠不止於此，下面列舉一些它的基本參數：
- fx:’fade’》值：字串，作用：選擇特效.轉場效果是它的重頭戲，我統計過，jquery.cycle.js支援27種轉場效果，我一一進行了測試，列舉在jquery.cycle.js切換特效參數詳解中，下面會介紹到。
- speed:300》值：正整數，作用：圖片漸層效果期間
- timeout:3000》值：正整數，作用：切換間隔時間
- pause:1》值：布爾值，作用：決定滑鼠指上去時是否暫停
- next:”》值：字串，實際是一個jquery對象，如’#s1′；作用：指定觸發變動到下一張事件的元素
- prev:’‘》值：同next；作用：指定觸發變動到上一張事件的元素
- pager:》值：一個jquery對象；作用：指定頁碼元素，如多圖片滾動時那個數字序號條
- pagerEvent:’mouseover’》值：滑鼠事件；作用：指定頁碼觸發事件
- pauseOnPagerHover:true》值：布爾值；作用：為true時，滑鼠指向頁碼區時暫停切換
- before:》值：函數；作用：指定變動開始前調用的函數
- after:》值：函數；作用：指定變動結束後調用的函數
其中，next,prev,pager在製作帶頁碼的多圖片切換時非常有用。
不常用的參數：
- easing:”》值：字串，作用：選擇緩動公式 （需配合Easing Plugin才能使用）
- random:1》值：布爾值，作用：是否隨機跳轉
- delay:》值：整數，作用：指定第一次變動開始前的延遲（不太確定）
- sync:》值：布爾值，作用：為false時，前一張圖片變動完成後，才會執行後一張圖片的變動
- shuffle:{top:300,left:300}》值：對象，作用：當fx:’shuffle’時才能使用，定義shuffle效果的位移位置
基本上可以不用的參數：
- cssBefore：變動前元素的CSS樣式
- animIn：變動進入時的CSS
- animOut：變動淡出時的CSS
- cssAfter：變動結束後的CSS
- cssFirst：英文讀不懂了。。
以上參數太複雜,可以實現很多個效果的哦！
jquery.cycle.js轉場效果參數解析
- blindX:前圖向右滑動漸隱，後圖向左滑動漸顯
- blindX:前圖向下滑動漸隱，後圖向上滑動漸顯
- blindX:前圖向右下滑動漸隱，後圖向左上滑動漸顯
- cover:前圖不動，後圖從右劃入覆蓋前圖
- curtainX：圖片被分成左右兩段，前圖兩段向右滑動漸隱，後圖兩段向左滑動漸顯（酷！）
- curtainY：圖片被分成上下兩段，前圖兩段向下滑動漸隱，後圖兩段向上滑動漸顯（酷！）
- fade:前圖漸隱，同時後圖漸顯
- fadeZoom：前圖漸隱，同時後圖由小變大覆蓋前圖
- growX：前圖不動，後圖寬度從0增至100%,出發點：中間
- growY：前圖不動，後圖高度從0增至100%，出發點：中間
- scrollUp：同時向上滑動至後圖完全顯示
- scrollLeft：同時向左滑動至後圖完全顯示
- scrollRight：同時向右滑動至後圖完全顯示
- scrollDown：同時向下滑動至後圖完全顯示
- scrollHorz：同Left,但手動觸發時，如果觸發數字小於當前，則反向滾動
- scrollVert：同Down,但手動觸發時，如果觸發數字小於當前，則反向滾動
- shuffle：前圖向左下方飛出，然後飛入後圖背後（酷！）
- slideX：前圖寬度由100減至0，後圖寬度由0增至100%（酷！）
- slideY：前圖高度由100減至0，後圖高度由0增至100%
- toss：前圖向右上方飛至消失
- turnUp：前圖不動，後圖從底部向上滑入
- turnDown：前圖向下滑出，後圖不動
- turnLeft：前圖不動，後圖從右向左滑入
- turnRight：前圖向右滑出，後圖不動
- uncover：前圖向左滑出，後圖不動
- wipe：前圖不動，後圖的寬和高同時由0增至100%覆蓋前圖，出發點：左上
- zoom：前圖縮小至0，後圖由0放大至100%，出發點：中間
這個27種效果是非常不錯的，是可以試試這個方法！
檔案提供下載的網址：http://yunpan.cn/QTAVD8c4bbGwj
