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

配上例子：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript" src="Scripts/jcarousellite_1.0.1.min.js"></script>

 </head>

 <body>

     <div class="tt">

         <ul style="float:left;">

           <li>

             <div><img src="imges/1.jpg" alt="img1" width="200px" height="200px" /></div>

           </li>

           <li>

             <div><img src="imges/3.jpg" alt="img3" width="200px" height="200px" /></div>

           </li>

           <li>

             <div><img src="imges/2.jpg" alt="img2" width="200px" height="200px" /></div>

           </li>

         </ul>

     </div>

     <div>

        <input type="button" value="Up" class="Input_Up" />

        <input type="button" value="Down" class="Input_Down" />

     </div>

 </body>

 </html>

 <script type="text/javascript">

     $(".tt").jCarouselLite({

         btnPrev: ".Input_Up", //上一个按钮的样式

         btnNext: ".Input_Down", //下一个按钮的样式

         vertical: true,  //设置false，左右滚动

         scroll: ,

         visible:

     });

 </script>

点击Up和Down按钮，就可实现上下垂直滚动，效果图：

小妙招：巧用jCarouselLite实现轮播：

上述的HTML代码不变，JS稍作修改：

<script type="text/javascript">

    $(".tt").jCarouselLite({

        btnPrev: ".Input_Up",

        btnNext: ".Input_Down",

        vertical: false,

        scroll: ,

        visible:

    });

    setInterval("$('.Input_Down').click()", );   //$('.Input_Down').click()  可实现上、下(左、右)轮播

</script>

即可实现轮播器效果，是不是比写大段的css+js简洁多了？

滚动轮播插件——jCarouselLite的更多相关文章

  1. H5滚动轮播插件

      概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能   支持超 ...

  2. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  3. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

  4. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  5. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  6. 12款 jquery轮播插件

    Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...

  7. 一款好用的轮播插件swiper，适用于移动端和web

    swiper的dom布局 <div id="commentsSwiper" class="swiper-container"> <div cl ...

  8. swipe轮播插件零基础实用

    此篇博客整理了常用的轮播效果,适用于所有开发人员 swipe是当下相对而言较好用的轮播插件,下面是博主整理的demo源代码,可直接上手(备注:需自己手动swipe所需的j和css) 此段代码总共是有三 ...

  9. flickity：支持触摸滑动，响应迅速的幻灯片轮播插件

    简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...

随机推荐

  1. SDL实现限制帧速

    很多人都在SDL_PollEvent和SDL_WaitEvent之间纠结.前者会带来更好的帧数表现,但是CPU占用极大,可以直接吃掉一个核心.后者则基本不占用CPU,但是帧数会受到影响.有没有办法使两 ...

  2. Codevs 5056 潜水员

    5056 潜水员 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 潜水员为了潜水要使用特殊装备.他有一个带两种气体的气缸:一个为氮气 ...

  3. MongoDB笔记（四）基本管理命令

    MongoDB命令帮助系统 基本命令及实例 一基本命令 二基本DDL和DML 三启动与终止 四安全管理 五数据备份恢复与迁移管理 六远程连接管理   MongoDB是一个NoSQL数据库系统:一个数据 ...

  4. apache常用工作模式的区别

    apache常用工作模式有两种 worker模式1.线程模式2.占用资源少3.稳定性略差4.并发大 prefork模式1.进程模式2.占用资源多3.稳定4.并发一般  来自为知笔记(Wiz)

  5. 2015-01-27-从实验出发理解buffer与cache区别-吴伟顺

        通过du(find) 与 cat 体现buffer与cache差异实验: 实验表明: 1 通常 buffer << cache 2 "文件系统"相关内容(ino ...

  6. Python3 高级特性

    切片 L[0:3]表示,从索引0开始取,直到索引3为止,但不包括索引3.即索引0,1,2,正好是3个元素. 如果第一个索引是0,还可以省略: >>> L =['Michael', ' ...

  7. 内容写到 csv 格式的文件中 及 读取 csv 格式的文件内容

    <?php/*把内容写到 csv 格式的文件中 基本思路是:1.用 $fp = fopen("filename", 'mode')打开一个csv文件,可以是打开时才建立的2. ...

  8. 青瓷qici - H5小游戏 抽奖机 2 界面布局

    背景图片 首先我们需要在当前场景下面创建UI的根节点,这个根节点决定了我们整个游戏的元素布局,以及适应多分辨率的缩放布局问题,所以我们其他的元素都要放在UIRoot下面. 考虑到我自己测试的时候在PC ...

  9. js data日期初始化的5种方法new Date()

    var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh:mm:ss"); 2 ...

  10. js 遍历json对象

    //方法一: var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13} ...