第31款插件:第26款插件：jcarousellite.js 基于Jquery的无缝“水平滚动”图片插件

描述：jcarousellite.js 是一款基于Jquery的无缝“水平滚动”图片插件，可以水平，也可以纵向，在这里先讲一下“水平方向”的方法。 图片展示： 兼容浏览器：IE6+/Firefox/Google Chrome 官方链接：暂无 JS下载：http://ijquery.360sites.cn/js/jcarousellite.js 预览： http://ijquery.360sites.cn/demo/jcarousellite 打包下载：http://ijquery.360sites.cn/js/jcarousellite/jcarousellite.zip 参数说明： 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   滚动结束时回调的函数,使用方法同上 复制代码 JS引用代码： <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://ijquery.360sites.cn/js/easing.js"></script> <script type="text/javascript" src="http://ijquery.360sites.cn/js/jcarousellite.js"></script> <script type="text/javascript">         $(document).ready(function(){                 $('#demo-01').jCarouselLite({                         btnPrev: '#prev-01',                         btnNext: '#next-01',                         visible:2                 });                         }); </script> 复制代码 HTML代码： <div class="carousel">         <a href="javascript:void(0);" class="prev" id="prev-01">  </a>         <div class="jCarouselLite" 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);" class="next" id="next-01">  </a>         <div class="clear"></div>    </div> 复制代码 CSS代码： .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;} 复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=31