jcarousellite图片无缝滚动插件

jcarousellite图片无缝滚动插件是基于jquery写的一个图片滚动插件，扩展使用非常简单，兼容性非常好，只需要把图片列表简单。

jcarousellite.js官方网址：http://www.gmarwaha.com/jquery/jcarousellite/#demo 1、在head区域先引入jquery，再引入jcarousellite.js文件

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

2、将图片列表布局如下(这是最简单的图片列表，省略了左右按钮，您可以根据自己需要布局更复杂，更好看的图片滚动)：

<div>
<ul>
<li><img src="1.jpg" alt="" width="100" height="100" ></li>
<li><img src="2.jpg" alt="" width="100" height="100" ></li>
<li><img src="3.jpg" alt="" width="100" height="100" ></li>
<li><img src="4.jpg" alt="" width="100" height="100" ></li>
</ul>
</div> 

3、调用插件代码(jcarousellite可以实现更复杂的功能，具体参见《参数说明》)：

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

参数说明：
滚动结束时回调的函数,使用方法同上

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	滚动结束时回调的函数,使用方法同上

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！