zoukankan      html  css  js  c++  java
  • 滚动轮播插件——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简洁多了?

  • 相关阅读:
    C# 设计模式-桥接模式
    C# 设计模式-外观模式
    C# 设计模式-代理模式
    楼层导航奇葩问题解决
    楼层导航和回顶部
    回顾
    禁止右击选中
    安装客服在线系统
    csdn 分享私藏的18个黑科技网站,想找什么软件就找什么软件!!!
    eyoucms 模板
  • 原文地址:https://www.cnblogs.com/yangyp/p/3301599.html
Copyright © 2011-2022 走看看