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

最新推荐文章于 2024-05-09 09:49:17 发布

JAVA_Drious

最新推荐文章于 2024-05-09 09:49:17 发布

阅读量2.3k

点赞数 1

分类专栏： JS 文章标签：图片

本文链接：https://blog.youkuaiyun.com/MrJavaweb/article/details/51584515

版权

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用JQuery.cycle()方法创建图片轮播效果，包括设置特效类型、过渡速度、切换间隔时间等关键参数。还提到了next、prev和pager属性在带页码的多图片切换中的应用，以及before和after回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本元素

<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">上一个&nbsp;</a>
            <a href="javascript:void(0);" class="next">下一个&nbsp;</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在制作带页码的多图片切换时非常有用。