jcarousellite_1.0.1.min.js 使用小结

注意：在DIV 内的 li  文本内容不能超过  div 的宽度，如果超出了 div 的宽度，会出现 li 超出div 范围内,并且  li 之间会

有换行出现

 

插件帮助文档 --- JCarouselLite

 

 

官方网站：

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

 

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

 

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