滚动轮播插件——jCarouselLite

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简洁多了？