zl程序教程

您现在的位置是:首页 >  后端

当前栏目

Jjcarousellite实现图片列表滚动的简单实例

实例列表 实现 简单 图片 滚动
2023-06-13 09:15:13 时间

jcarouselLite与jcarousel相比去掉了皮肤的约束,可以自定义的设置前后按钮和选项卡按钮,生成的html更加简洁,文件更小(2k)
下载链接:
使用方法:http://www.gmarwaha.com/jquery/jcarousellite/

复制代码代码如下:

<divclass="类名">
 <ul>
   <li></li>
 </ul>
</div>

<scripttype="text/javascript"src="js/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="js/jcarousellite_1.0.1.min.js"></script>
<scripttype="text/javascript">
   $(document).ready(function(){
       $(".类名").jCarouselLite({
           btnNext:".next",   
           btnPrev:".prev",
           //btnGo:[".1",".2"],//自定义滚动位置选项卡,按照数组顺序
           //auto:2000,           //指定多少毫秒定期自动滚动。默认为null
           //speed:800,           //滑动的速度,可以尝试80010001500
           //vertical:false,       //是否垂直滚动,默认false
           //circular:true,       //是否循环滚动,默认为true
           //visible:3,           //元素可见数量,可以为小数,如2.5为2.5个li
           //scroll:1,               //每次滚动的li数量
           //start:0,               //开始的地方,默认是0
           //beforeStart:function(){}   //滚动开始时回调的函数
           //afterEnd:function(){}       //滚动结束时回调的函数
       });
   });
</script>