jcarousellite(上下、水平滚动元素插件)插件使用:
参数说明:
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 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 5 <script type="text/javascript" src="Scripts/jcarousellite_1.0.1.min.js"></script> 6 </head> 7 <body> 8 <div class="tt"> 9 <ul style="float:left;"> 10 <li> 11 <div><img src="imges/1.jpg" alt="img1" width="200px" height="200px" /></div> 12 </li> 13 <li> 14 <div><img src="imges/3.jpg" alt="img3" width="200px" height="200px" /></div> 15 </li> 16 <li> 17 <div><img src="imges/2.jpg" alt="img2" width="200px" height="200px" /></div> 18 </li> 19 </ul> 20 </div> 21 <div> 22 <input type="button" value="Up" class="Input_Up" /> 23 <input type="button" value="Down" class="Input_Down" /> 24 </div> 25 </body> 26 </html> 27 <script type="text/javascript"> 28 $(".tt").jCarouselLite({ 29 btnPrev: ".Input_Up", //上一个按钮的样式 30 btnNext: ".Input_Down", //下一个按钮的样式 31 vertical: true, //设置false,左右滚动 32 scroll: 1, 33 visible: 2 34 }); 35 </script>
点击Up和Down按钮,就可实现上下垂直滚动,效果图:
小妙招:巧用jCarouselLite实现轮播:
上述的HTML代码不变,JS稍作修改:
<script type="text/javascript"> $(".tt").jCarouselLite({ btnPrev: ".Input_Up", btnNext: ".Input_Down", vertical: false, scroll: 1, visible: 1 }); setInterval("$('.Input_Down').click()", 2000); //$('.Input_Down').click() 可实现上、下(左、右)轮播 </script>
即可实现轮播器效果,是不是比写大段的css+js简洁多了?