樣式：
a{text-decoration: none;} *{margin:0; padding:0;} /*容器設置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padding:13px 0px 0px 12px;} .player ul{ width:198px; height:213px; border:solid 1px #ebe2d3; overflow:hidden;} .player li{ width:196px; height:211px; border:solid 1px #b9a686; position:relative;} /*播放按鈕編號*/ .number{ position:absolute; top:233px; left:147px; width:70px; height:18px;} .number a{display:block;position:absolute; width:15px; height:15px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_14.jpg) no-repeat; position:absolute; font-size:12px; font-family:"宋體"; color:#732a0a; text-align:center; line-height:15px;} .number .active{ color:#fff;} .number .num1{top:0px; left:0px;} .number .num2{top:0px; left:16px;} .number .num3{top:0px; left:32px;} .number .num4{top:0px; left:48px;}
html:js文件可以自己再網上下載。
<div class="player"> <ul> <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_16.jpg" width="196" height="211" title="十大超級軍團稱號" /></li> <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_17.jpg" width="196" height="211"title="萬元現金" /></li> <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_18.jpg" width="196" height="211" title="暢游一卡通" /></li> <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_19.jpg"width="196" height="211" title="軍團特權值" /></li> </ul> <div class="number"></div> </div> <div> <a href="javascript:void(0);" class="prev">上一個</a> <a href="javascript:void(0);" class="next">下一個</a> </div> <script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.min.js"></script> <script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.cycle.all.min.js"></script>
$('.player ul').cycle({
fx: 'fade',
timeout: 4000, // 幻燈片過渡間隔，單位是毫秒 (若值為0則不自動切換)
pause: 1 , // 過渡的速度
pager: '.number',// 按鈕容器元素
prev:'.prev',
next:'.next',
pagerEvent: 'mouseover', // 按鈕驅動頁面導航的事件
cleartype: !$.support.opacity, // 若為true，則應用clearType修正 (專為IE提供)是否支持半透明效果
activePagerClass: 'active', // 當按鈕鏈接被激活時的css類名
pagerAnchorBuilder: function(idx, slide) { // 用於建立按鈕超鏈接的回調函數:// function(index, DOMelement)
idx += 1;
return '<a href="javascript:void(0)" class="num'+idx+'">' + idx + '</a>';
}
});
參數說明：
1.官網：http://jquery.malsup.com/cycle/
demo: http://jquery.malsup.com/cycle/adv.html
2.
fx參數設置過度效果
jquery.cycle.js現在暫時支持27種切換特效， 測試如下，以字母排序：
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：前圖不動，后圖從底部向上滑入
turn
3. 參數如下：
// 重寫這個全局變量（每個都是可選的）
{
fx: 'fade', // 過渡效果的名字 (或者用逗號分開, 如: fade,scrollUp,shuffle)
timeout: 4000, // 幻燈片過渡間隔，單位是毫秒 (若值為0則不自動切換)
timeoutFn: null, // 每張幻燈片播放時間結束時的回調函數 function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // 若為true，則當前幻燈片播放完后會直接播放下一張
speed: 1000, // 過渡的速度
speedIn: null, // 幻燈片開始時的過渡速度
speedOut: null, // 幻燈片結束時的過渡速度
next: null, // 下一張幻燈片的觸發元素
prev: null, // 上一張幻燈片的觸發元素
prevNextClick: null, // prev/next的單擊回調函數: function(isNext, zeroBasedSlideIndex, slideElement)
prevNextEvent: 'click.<a title="cycle" href="http://www.mileke.com/archives/tag/cycle">cycle</a>',//用於手動驅動上/下一張過渡的事件
pager: null, // 頁面容器元素
pagerClick: null, // 頁面容器的單擊回調函數: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'click.cycle', // 驅動頁面導航的事件
allowPagerClickBubble: false, // 允許或阻止頁面單擊事件的向上傳遞
pagerAnchorBuilder: null, // 用於建立超鏈接的回調函數:// function(index, DOMelement)
before: null, // 過渡回調函數 (scope為將要顯示的元素): function(currSlideElement, nextSlideElement, options, forwardFlag)
after: null, // 過渡回調函數 (scope為已經顯示過的元素): function(currSlideElement, nextSlideElement, options, forwardFlag)
end: null, // 當幻燈片終止時的回調函數 (與'autostop'和'nowrap'選項聯用): function(options)
easing: null, // 開始和結束過渡時的easing方法
easeIn: null, // 開始過渡時的easing
easeOut: null, // 結束過渡時的easing
shuffle: null, // 對於shuffle動畫的坐標, 比如: { top:15, left: 200 }
animIn: null, // 幻燈片進入時的動畫屬性
animOut: null, // 幻燈片結束時的動畫屬性
cssBefore: null, // 幻燈片進入前的狀態屬性
cssAfter: null, // 幻燈片結束后的狀態屬性
fxFn: null, // 用於控制過渡的函數: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // 容器高度
startingSlide: 0, // 第一張要顯示的幻燈片在數組中的索引（基於0）
sync: 1, // 若為true則進入/結束的過渡效果同時發生
random: 0, // 若為true則隨機播放幻燈片，反之則按順序播放 (對shuffle動畫無效)
fit: 0, // 強制幻燈片適應容器
containerResize: 1, // 調整容器大小去適應最大的幻燈片
pause: 0, // 若為true則啟用"pause on hover"（鼠標滑過時暫停）功能
pauseOnPagerHover: 0, // 若為true則當鼠標滑過頁面時暫停
autostop: 0, // 若為true則播放完'autostopCount'個幻燈片時自動停止
autostopCount: 0, // 播放幻燈片個數
delay: 0, // 第一張幻燈片的播放時延，可以為負，單位是毫秒
slideExpr: null, // 選擇幻燈片的表達式
cleartype: !$.support.opacity, // 若為true，則應用clearType修正 (專為IE提供)
cleartypeNoBg: false, // 若為true，則禁用附加的clearType修正
nowrap: 0, // 若為ture則防止幻燈片換行
fastOnEvent: 0, // 當手動切換時快速過渡
randomizeEffects:1, // 當指定了多個效果時有效，若為true，則這些效果將隨機出現
rev: 0, // 若為true，則過渡效果反向播放
manualTrump: true, // 若為true，則手動過渡會停止自動過渡
requeueOnImageNotLoaded: true, // 如果某張圖片幻燈片尚未加載，則重新加入隊列
requeueTimeout: 250, // 重新排隊的時延（ms）
activePagerClass: 'activeSlide', // 當頁面鏈接被激活時的css類名
updateActivePagerLink: null // 當頁面鏈接被激活時的回調函數(添加/刪除 activePagerClass 樣式)
};
文檔以及源碼下載：