Jquery图片轮播插件--jcarousellite的使用

一、关于jcarousellite插件：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,默认falseauto        int    指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000speed       int    滑动的速度,可以尝试800 1000 1500,设置成0将删除效果easing      string 缓冲效果名称,如：easing: “bounceout”,需要jquery中的easing pluin（缓冲插件实现）,只适用于jq1.2vertical    bool   是否垂直滚动,可选：false,true,默认falsecircular    bool   是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动visible     int    可见数量,可以为小数，如2.5为2.5个listart       int    开始的地方,默认是0scroll      int    每次滚动的li数量beforeStart func   滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert(“开始的对象是:” + a)}afterEnd    func   滚动结束时回调的函数,使用方法同上三、如何使用：引入jquery和js，这里要注意，jquery版本只能是jquery-1.4.2.min.js以上，其他好像不能使用！！<script type="text/javascript"src="/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="/js/jcarousellite.js"></script>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>CSS代码：这里不指定具体CSS代码，根据你们个人需求设置显示样式JS代码：

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

主要注意问题：

1.无论是横向滚动还是纵向滚动，基本流程都是一样的，只需要在jCarouselLite参数中vertical:true即可，剩下就

是用css将父元素div宽度调窄就行了。

2.一定要设置两个箭头的id值(prev-01,next-01)

3.注意jquery版本问题