blear.ui.slider

1Introduction

2Example

var Slider = require('blear.ui.slider');

new SLider({
    el: '#demo',
    width: 500,
    height: 300
});

<div id="demo">
    <ul>
        <li><img src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff1a2t679oj30rs0gotb2.jpg" alt=""></li>
        <li><img src="http://ww4.sinaimg.cn/large/006tNbRwgy1ff1a40kacoj30rs0godl3.jpg" alt=""></li>
        <li><img src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff1a51pu4mj30rs0gotbk.jpg" alt=""></li>
        <li><img src="http://ww3.sinaimg.cn/large/006tNbRwgy1ff1a4q0shxj30rs0gognd.jpg" alt=""></li>
        <li><img src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff1a6gxn6nj30rs0go427.jpg" alt=""></li>
    </ul>
</div>

3Static

3.1.defaults

  • 类型：Object
  • 说明：默认配置

3.2.defaults.el

  • 类型：Element | String
  • 说明：轮播容器（要求div#demo>ul>(li*N)）

3.3.defaults.width

  • 类型：Number
  • 说明：轮播宽度

3.4.defaults.height

  • 类型：Number
  • 说明：轮播高度

3.5.defaults.direction

  • 类型：String
  • 说明：轮播方向，可选 "x"、"y"
  • 默认："x"

3.6.defaults.addClass

  • 类型：String
  • 说明：附加的 class
  • 默认：""

3.7.defaults.loop

  • 类型：Boolean
  • 说明：是否循环切换
  • 默认：true

3.8.defaults.auto

  • 类型：Boolean
  • 说明：是否自动切换
  • 默认：true

3.9.defaults.interval

  • 类型：Number
  • 说明：自动切换间隔时间，单位 ms
  • 默认：5000

3.10.defaults.active

  • 类型：Number
  • 说明：初始化激活的索引值
  • 默认：0

3.11.defaults.slideAnimation

  • 类型：Number
  • 说明：切换动画
  • 默认：空动画，需要业务层自己实现，参见blear.classes.animation

4new Slider(options)

实例化一个轮播图，options 为入参，默认值为 .defaults。

5Prototype

5.1#update([index]): this

轮播图列表发生变化后，手动更新。

5.1.1index

  • 类型：Number
  • 说明：显示指定轮播图序号，从 0 开始
  • 默认：上一次的序号

5.2#prev(): this

切换到上一个项目。

5.3#next(): this

切换到下一个项目。

5.4#go(index): this

切换到指定序号项目。

5.4.1index

  • 类型：Number
  • 说明：轮播图序号，从 0 开始

5.5#index(): index

当前显示项目的序号，从 0 开始。

5.6#tap(sel, handle): this

触摸到某一选择器后执行。

5.6.1sel

  • 类型：String
  • 说明：选择器

5.6.2handle

  • 类型：Function
  • 说明：回调

5.7#destroy()

销毁实例。

6Events

6.1beforeSlide(index, to)

切换之前触发。

6.1.1index

  • 类型：Number
  • 说明：即将要切换的索引值，从 0 开始

6.1.2to

  • 类型：Object
  • 说明：切换到目标位置的样式描述

6.2afterSlide(index, to)

切换之后触发。

6.2.1index

  • 类型：Number
  • 说明：切换后的索引值，从 0 开始

6.3tap(meta)

轮播图被触摸后触发。

6.3.1meta

7Dependencies

8Reference

无。