插件帮助文档 --- jquery---JCarouselLite

来源：互联网发布：串口编程编辑：程序博客网时间：2024/04/30 18:11

官方网站：

http://www.gmarwaha.com/jquery/jcarousellite/

插件描述：

JCarouselLite是一款jquery插件，可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节，是一款不可多得的滚动插件。

说明：

12320网站首页推荐专家使用了走马灯的方式，以前选用的JS过于杂乱，不好调控，影响效率。所以选用JCarouselLite替代。

建议：

还有一款同类型的插件JCarousel，也可以使用，功能更加强大。

插件使用：

一、在ThinksKing的Plugins里面找到已解压好的JCarouselLite，将jcarousellite_1.0.1.min添加到项目中。

二、为页面添加jcarousellite：

1.1 添加Jquery和jcarousellite的引用。

<script src="http://www.cnblogs.com/Scripts/Plugin/Jcarousellite/jcarousellite_1.0.1.min.js" type="text/javascript"></script><script  src="http://www.cnblogs.com/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

1.2 Html代码编写.

<button class="prev"><<</button><button class="next">>></button>    <div class="anyClass">    <ul>        <li><img src="someimage" alt="" width="100" height="100" ></li>        <li><img src="someimage" alt="" width="100" height="100" ></li>        <li><img src="someimage" alt="" width="100" height="100" ></li>        <li><img src="someimage" alt="" width="100" height="100" ></li>    </ul></div>

1.3 API参数列表

btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev"

btnNext string 下一个按钮的class名, 比如 btnPrev: ".prev"

btnGo $(function() {

$(".anyClass").jCarouselLite({

btnNext: ".next",

btnPrev: ".prev"

});

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.4 方法调用

2011.12.10 实现Widget

1.添加easing引用：

<script src="Scripts/Plugin/JCarousel/jquery.easing.1.1.js"type="text/javascript"></script>

调用代码：

<script type="text/javascript">    $(function () {        $(".widget .anyClass").jCarouselLite({            btnNext: ".next",            btnPrev: ".prev",            vertical: true,            speed: 800,            easing: "backout"        });        $(".widget img").click(function () {            $(".widget .mid img").attr("src", $(this).attr("src"));                 })    });</script>

页面代码：

<div class="widget">    <button class="prev">↓</button>    <div>        <div class="mid" style="float:left">            <img src="Images/2.jpg" alt="" height="100" width="100"/>        </div>        <div class="anyClass" >            <ul>                <li><img src="Images/2.jpg"  alt="" width="100" height="100" /></li>                <li><img src="Images/3.jpg"  alt="" width="100" height="100" /></li>                <li><img src="Images/4.jpg"  alt="" width="100" height="100" /></li>                <li><img src="Images/3.jpg"  alt="" width="100" height="100" /></li>            </ul>        </div>    </div>    <button class="next">↑</button></div>

三、官方文档

Docuent:ThinksKing/Plugins/JCarouselLite/ jCarousel Lite – Document

API调用说明: ThinksKing/Plugins/JCarouselLite/JCarouselLite API

文章来源：http://www.cnblogs.com/kulong995/articles/2352860.html

四、附加内容

jcarousellite 鼠标移入暂停滚动的解决办法

此文转载于亮人百度的空间感谢他的帮忙！！此处作下转载声明

我们网上下载来的jcarousellite插件使用起来非常简单,网上也有很多的例子。但想使用鼠标移入暂停滚动的功能,一直没找到怎么使用,有可能是版本没有这功能，
找到好久没找到,就自已修改了原文件,凑上这个功能，找到这样的代码：
   o = $.extend({
       btnPrev: null,
       btnNext: null,
       btnGo: null,
       mouseWheel: false,
       auto: null,
       speed: 200,
       easing: null,
       vertical: false,
       circular: true,
       visible: 3,
       start: 0,
       scroll: 1,
       beforeStart: null,
       play:true,
       afterEnd: null
    }, o ||{});

我在这里添加了一个属性play:true,用来控制自动滚动的状态

现在为对象添加鼠标移入事件

       if(o.mouseWheel &&div.mousewheel)
           div.mousewheel(function(e, d) {
               return d>0 ? go(curr-o.scroll) :go(curr+o.scroll);
           });

       if(o.auto){
           setInterval(AutoPlay,o.auto+o.speed);
  }

function AutoPlay(){
   if(o.play){
   go(curr+o.scroll);
    }
  }
菊花的颜色为我添加修改的代码，
这样一个鼠标移动暂停就添加完成了,您老也赶快去试试！

1 0