JQuery.cycle()实现图片轮播简单使用

基本元素

<div class="player">
<ul>
<li><img src="img/skater-in-air.jpg" width="200" height="200"/></li>
<li><img src="img/skater.jpg" width="200" height="200"/></li>
<li><img src="img/skaters.jpg" width="200" height="200"  /></li>
</ul>
<div class="number"></div>
<div>
<a href="javascript:void(0);" class="prev">上一个 </a>
<a href="javascript:void(0);" class="next">下一个 </a>
</div>
</div>

js代码

<script type="text/javascript">
$('.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>';
}
});

需要引入实现Jquery所需要的文件

jquery.cycle()的一些常用参数

fx:’fade’》值：字符串，作用：选择特效.切换效果是它的重头戏。

speed:300》值：正整数，作用：图片渐变效果持续时间

timeout:3000》值：正整数，作用：切换间隔时间

pause:1》值：布尔值，作用：决定鼠标指上去时是否暂停

next:”》值：字符串，实际是一个jquery对象，如’#s1′；作用：指定触发变动到下一张事件的元素

prev:”》值：同next；作用：指定触发变动到上一张事件的元素

pager:》值：一个jquery对象；作用：指定页码元素，如多图片滚动时那个数字序号条

pagerEvent:’mouseover’》值：鼠标事件；作用：指定页码触发事件

pauseOnPagerHover:true》值：布尔值；作用：为true时，鼠标指向页码区时暂停切换

before:》值：函数；作用：指定变动开始前调用的函数

after:》值：函数；作用：指定变动结束后调用的函数

其中，next,prev,pager在制作带页码的多图片切换时非常有用。