自從使用了jquery.cycle.js，我覺得再也不用自己寫javascript的圖片切換效果了，因為一想到它，我就會有一種深深的無力感，就好像面對著一座翻不過去的大山…

吐槽完畢，如標題所訴，jquery.cycle.js是jquery的一個插件，主要用來實現(xiàn)千奇百怪的圖片切換效果——當然，不是圖片也能切換，只是它經(jīng)常被用來做圖片切換而已。

沒使用過jQuery.Cycle.js的同學，可以點這里（官網(wǎng)）去摸摸底，看看有沒有被震一下的感覺。

jquery.cycle.js能實現(xiàn)的切換效果非常復雜，相伴而來的就是它也有不簡單的參數(shù)設置，不過我會給大家一一描述清楚的。

先說下基本使用，首先你的HTML結構應該類似這樣：

<div id="aDiv">

<img src="http://blog.163.com/xz551@126/blog/images/beach1.jpg" width="200" height="200" />

<img src="http://blog.163.com/xz551@126/blog/images/beach2.jpg" width="200" height="200" />

<img src="http://blog.163.com/xz551@126/blog/images/beach3.jpg" width="200" height="200" />

</div>

加上一點基本的CSS：

.pics

{

height: 232px;

width: 232px;

padding: 0;

margin: 0;

}

.pics img

{

padding: 15px;

border: 1px solid #ccc;

background-color: #eee;

width: 200px;

height: 200px;

top: 0;

left: 0;

}

然后使用以下JS：

$(‘#aDiv’).cycle();

這樣，就可以實現(xiàn)基本的切換效果了，默認效果是淡入淡出。

當然jquery.cycle.js的強大遠不止于此，下面列舉一些它的基本參數(shù)：

fx:’fade’》值：字符串，作用：選擇特效.切換效果是它的重頭戲，我統(tǒng)計過，jquery.cycle.js支持27種切換效果

speed:300》值：正整數(shù)，作用：圖片漸變效果持續(xù)時間

timeout:3000》值：正整數(shù)，作用：切換間隔時間

pause:1》值：布爾值，作用：決定鼠標指上去時是否暫停

next:”》值：字符串，實際是一個jquery對象，如’#s1′；作用：指定觸發(fā)變動到下一張事件的元素

prev:’‘》值：同next；作用：指定觸發(fā)變動到上一張事件的元素

pager:》值：一個jquery對象；作用：指定頁碼元素，如多圖片滾動時那個數(shù)字序號條

pagerEvent:’mouseover’》值：鼠標事件；作用：指定頁碼觸發(fā)事件

pauseOnPagerHover:true》值：布爾值；作用：為true時，鼠標指向頁碼區(qū)時暫停切換

before:》值：函數(shù)；作用：指定變動開始前調用的函數(shù)

after:》值：函數(shù)；作用：指定變動結束后調用的函數(shù)

其中，next,prev,pager在制作帶頁碼的多圖片切換時非常有用。

不常用的參數(shù)：

easing:”》值：字符串，作用：選擇緩動公式 （需配合Easing Plugin才能使用）

random:1》值：布爾值，作用：是否隨機跳轉

delay:》值：整數(shù)，作用：指定第一次變動開始前的延遲（不太確定）

sync:》值：布爾值，作用：為false時，前一張圖片變動完成后，才會執(zhí)行后一張圖片的變動

shuffle:{top:300,left:300}》值：對象，作用：當fx:’shuffle’時才能使用，定義shuffle效果的偏移位置

基本上可以不用的參數(shù)：

cssBefore：變動前元素的CSS樣式

animIn：變動進入時的CSS

animOut：變動淡出時的CSS

cssAfter：變動結束后的CSS

cssFirst：英文讀不懂了。。

以上參數(shù)太復雜，但可以實現(xiàn)驚天地泣鬼神的效果，只是復雜的讓我實在不想解釋了…有興致的同學們，還是去官網(wǎng)文檔查看吧

27種效果。

blindX:前圖向右滑動漸隱，后圖向左滑動漸顯

blindX:前圖向下滑動漸隱，后圖向上滑動漸顯

blindX:前圖向右下滑動漸隱，后圖向左上滑動漸顯

cover:前圖不動，后圖從右劃入覆蓋前圖

curtainX：圖片被分成左右兩段，前圖兩段向右滑動漸隱，后圖兩段向左滑動漸顯（酷?。?/p>

curtainY：圖片被分成上下兩段，前圖兩段向下滑動漸隱，后圖兩段向上滑動漸顯（酷！）

fade:前圖漸隱，同時后圖漸顯

fadeZoom：前圖漸隱，同時后圖由小變大覆蓋前圖

growX：前圖不動，后圖寬度從0增至100%,出發(fā)點：中間

growY：前圖不動，后圖高度從0增至100%，出發(fā)點：中間

scrollUp：同時向上滑動至后圖完全顯示

scrollLeft：同時向左滑動至后圖完全顯示

scrollRight：同時向右滑動至后圖完全顯示

scrollDown：同時向下滑動至后圖完全顯示

scrollHorz：同Left,但手動觸發(fā)時，如果觸發(fā)數(shù)字小于當前，則反向滾動

scrollVert：同Down,但手動觸發(fā)時，如果觸發(fā)數(shù)字小于當前，則反向滾動

shuffle：前圖向左下方飛出，然后飛入后圖背后（酷?。?/p>

slideX：前圖寬度由100減至0，后圖寬度由0增至100%（酷?。?/p>

slideY：前圖高度由100減至0，后圖高度由0增至100%

toss：前圖向右上方飛至消失

turnUp：前圖不動，后圖從底部向上滑入

turnDown：前圖向下滑出，后圖不動

turnLeft：前圖不動，后圖從右向左滑入

turnRight：前圖向右滑出，后圖不動

uncover：前圖向左滑出，后圖不動

wipe：前圖不動，后圖的寬和高同時由0增至100%覆蓋前圖，出發(fā)點：左上

zoom：前圖縮小至0，后圖由0放大至100%，出發(fā)點：中間

————————————————

版權聲明：本文為CSDN博主「零下瘋度」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/xiaojian1018/article/details/43851215