JQuery图片无缝滚动插件jcarousellite.js

简介

jcarousellite.js是一款JQuery图片无缝滚动插件。它并不能取代那些重量级插件；相反，对于那些主要关注点不是构建一个全面的图像库的用户（比如我）来说，它是一个轻量级的替代方案。

参数说明：

btnPrev     string 上一个按钮的class名, 比如  btnPrev: “.prev”
btnNext     string 下一个按钮的class名, 比如  btnPrev: “.prev”
btnGo       array  自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮：[".1", ".2"]
mouseWheel  bool   鼠标滑是否可以轮控制上下滚动,可选：false,true,默认false
auto        int    指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000
speed       int    滑动的速度,可以尝试800 1000 1500,设置成0将删除效果
easing      string 缓冲效果名称,如：easing: “bounceout”,需要jquery中的easing pluin（缓冲插件实现）,只适用于jq1.2
vertical    bool   是否垂直滚动,可选：false,true,默认false
circular    bool   是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动
visible     int    可见数量,可以为小数，如2.5为2.5个li
start       int    开始的地方,默认是0
scroll      int    每次滚动的li数量
beforeStart func   滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert(“开始的对象是:” + a)}
afterEnd    func   滚动结束时回调的函数,使用方法同上

使用

1.  引入 jquery.js 和 jcarousellite.js 文件

2.  HTML

<div>
  <a href="javascript:void(0);" id="prev-01"></a>
  <div id="demo-01">
    <ul>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/1.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/2.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/3.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/4.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/5.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/6.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/7.jpg" /></a></li>
      <li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/8.jpg" /></a></li>
    </ul>
  </div>
  <a href="javascript:void(0);" id="next-01"></a>
  <div></div>
</div>

[CSS]
<style>
.carousel .prev , .carousel .next {height:23px;width:23px;overflow:hidden;display:block;margin-top:40px;text-decoration:none;cursor:pointer;}
.carousel .prev {float:left;background:url(images/imageNavLeft.gif) no-repeat;}
.carousel .next {float:left;background:url(images/imageNavRight.gif) no-repeat;}
.carousel #prev-03.disabled{background:url(images/imageNavLeft-disabled.gif) no-repeat;cursor:default;}
.carousel #next-03.disabled{background:url(images/imageNavRight-disabled.gif) no-repeat;cursor:default;}
.jCarouselLite {float:left;width:486px;height:152px;overflow:hidden;/*必要元素*/}
.jCarouselLite li{height:152px;width:162px;text-align:center;}
.jCarouselLite li img,.jCarouselLite-01 li img{border:solid 1px #ddd;}
</style>

3.  调用

<script type="text/javascript">
  $(document).ready(function(){
    $('#demo-01').jCarouselLite({
      btnPrev: '#prev-01',
      btnNext: '#next-01',
      visible:2
    });
  });
</script>

相关链接

Github 地址 ：https://github.com/ganeshmax/jcarousellite/tree/master/versions

官方文档 ：  https://www.gmarwaha.com/jquery/jcarousellite/

在线演示 ：  https://www.gmarwaha.com/jquery/jcarousellite/demo.php