Carousel

Carousel又叫Slider，是经典的移动端幻灯切换组件。本组件支持自动播放、循环等。

快速调用说明

It is very easy to use this module.

HTML：

<div class="carousel carousel-big">
    <div class="carousel-big-outer">
        <ul class="carousel-big-wrap">
            <li><a href="http://m.taobao.com"><img src="http://gtms04.alicdn.com/tps/i4/T1QVNSFMXaXXaZVCTS-300-100.png" width="300" height="100" alt="1" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms01.alicdn.com/tps/i1/T1bFNSFNxaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="2" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms02.alicdn.com/tps/i2/T141tRFRXaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="3" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms03.alicdn.com/tps/i3/T1SnVNFFRcXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="4" /></a></li>
        </ul>
    </div>
    <div class="carousel-status"></div>
</div>

JavaScript：

        carousel = new Carousel({
            element: '.carousel',
            trigger : '.carousel-status',
            hasTrigger: true,
            play : true,
            interval: 1000,
            loop : true
        });        

配置说明

参数释义

element element

• 页面 dom 节点，只读。

wrap string

• 滑动显示区域，默认为container的第一个子元素。（该元素固定宽高overflow为hidden，否则无法滑动）

panel string

• 面板元素，默认为wrap的第一个子元素

trigger string

• 触发元素，也可理解为状态元素

activeTriggerCls string

• 触发元素内子元素的激活样式，默认'sel'

hasTrigger Boolean

• 是否需要触发事件，例tab页签就需要click触发，默认false

steps Number

• 每次滑动的距离，默认0

left Number

• panel初始的x坐标，默认0

visible Number

• 每次滑动几个panels，默认1

margin Number

• 面板元素内子元素间的间距，默认0

curIndex Number

• 初始化在哪个panels上，默认0为第一个

duration Number

• 动画持续时间，默认300ms

loop Boolean

• 动画循环，默认false

play Boolean

• 动画自动播放，默认false

interval Number

• 播放间隔时间，默认5000ms，play为true时才有效

useTransform Boolean

• 以translate方式动画，支持3d默认true，不支持默认false

lazy String

• 图片延时加载属性，默认'.lazyimg'

lazyIndex Number

• 默认加载到第几屏，默认1

callback Function

• 动画结束后触发

prev String

• 上一个元素

next Function

• 下一个元素

activePnCls String

• prev和next在头尾时的样式，默认'none'

HTML结构

<div class="carousel"><!--容器层,container-->
    <div class="carousel-outer"><!--滑动显示区域,wrap-->
        <ul class="carousel-wrap"><!--面板元素,也就是做动画的元素,panel-->
            <li></li>   <!-- 一系列子元素,就是数据内容 -->
            <li></li>
            ...
        </ul>
    </div>
</div>

实例API

instance.XXX()

• 说明