jCarouselLite - 一个非常简单的轮播小部件可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节
  • 分享到微信朋友圈
    X
查看演示

关于 jCarouselLite.js

jcarousellite是一款jquery插件，可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节，是一款不可多得的滚动插件，使用非常方便，支持jquery1.2和以上版本。
jcarousellite非常轻量，大约2 KB，但非常灵活且可定制，可以满足我们的大多数需求。
jCarousel Lite 并不是那些重量级插件的替代品；相反，它是一种轻量级的替代方案，适合那些主要关注点不是构建完整图片库的用户（比如我）。例如，我的用例需要一个非常简单的轮播小部件，它将位于屏幕的一角。不需要太多的自定义。我认为其他轮播，包括其所有选项和重量，都是多余的。所以，我开始开发自己的轻量级轮播。感谢你们所有的开发人员，今天有数十万开发人员在使用 jCarouselLite。

8b712303-5e59-4318-bb0c-fa1fb43709d4.png
参考效果

jCarouselLite安装

安装非常简单，只需按照下面给出的 3 个步骤即可...

步骤1：

包含对 jQuery 库和插件的引用jCarouselLite。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousellite.js"></script>

步骤2：

在您的 HTML 文件中，提供轮播所需的标记（div包含的标记ul）。您还需要导航按钮，但这些按钮不必是轮播标记本身的一部分。示例如下...

<button class="prev">&laquo;</button>
<button class="next">&raquo;</button>

<div class="any-class">
    <ul>
        <li><img src="image/1.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/2.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/3.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/4.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/5.jpg" style="width:150px; height:118px;"></li>
    </ul>
</div>

步骤3：

调用插件。

$(function() {
    $(".any-class").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

参数说明

  • 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 这个是接口，每次滑动效果执行之后执行的自定义函数

使用许可

详细的版权说明请看官方许可说明：https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE