样式：
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文件可以自己再网上下载。
$('.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 '' + idx + ''; }}); 参数说明：
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：前图不动，后图从底部向上滑入 turn3. 参数如下：// 重写这个全局变量（每个都是可选的）{ 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 样式)};文档以及源码下载：