使用jcarousellite.js制作可以控制左右切换的图片滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

jcarousellite是一款来自国外的jQuery插件， 我们利用它可以实现很多功能，这里我们主要使用它完成一个可以控制左右切换的图片滚动效果。

关键代码

<script type="text/javascript">
    $(document).ready(function () {
        $("#demo").jCarouselLite({
            btnPrev: "#prev",  //上一张按钮
            btnNext: "#next", //下一张按钮
            circular: true, //是否重复播放
            auto: 800, //设置自动播放的速度
            speed: 3000, //动画效果速度
            visible: 3 //设置默认显示几个li
        });
    });
</script>

jCarouselLite参数说明

  • btnPrev string 上一张按钮

  • btnNext string 下一张按钮

  • btnGo array 标签控制，也就是用’1,2,3,4…’来控制

  • mouseWheel bool 是否支持鼠标滑轮滚动，属性值：false / true；默认为false 打开此项需要jQuery UI插件支持

  • auto int 设置自动播放的速度，默认自动播放是关闭的，格式 auto: 800 (为播放速度)

  • speed int 动画效果速度

  • easing string 动画效果优化,如：easing: "bounceout",需要jquery中的easing pluin（缓冲插件实现）,只适用于jq1.2

  • vertical bool 动画方向，如果设置为true，则表示垂直滚动，默认为false

  • circular bool 是否重复播放，如果设置为false，则到最后一个下一张按钮就点不动了，到第一张上一张按钮就点不动

  • visible int 设置默认显示几个li，默认是3个

  • start int 效果从第几个开始，默认为0

  • scroll int 一次滑动几个li，默认是2

  • beforeStart func 这个是接口，每次滑动效果执行之前执行的自定义函数

  • afterEnd func 这个是接口，每次滑动效果执行之后执行的自定义函数