开始之前，先来看看 Switchable 能做什么：demo

该模块由 Switchable 基础类、插件和 Widget 类组成。Switchable 基础类抽象了切换的基本操作，通过插件机制实现了自动播放、循环、切换效果、延迟加载、倒计时动画等扩展功能，最后封装成各个 Widget 类，让用户能简明快速地调用。

### Properties

#### container - `String | HTMLElement`

容器

#### config - `Object`

Switchable 的配置信息。具体配置项请参考 源码

#### triggers - `Array`

触点集合

#### panels - `Array`

面板集合

#### content - `HTMLElement`

存放面板的容器

#### length - `Number`

触点的个数

#### activeIndex - `Number`

被激活的触点序号

### Events

#### beforeSwitch

切换前事件

#### switch

切换事件

    KISSY.ready(function(S) {
        var tabs = new S.Tabs('#demo1');

        tabs.on('switch', function(ev) {
            if (ev.toIndex === 0) {
                alert('下一张是第一张');
            }
        });
    });

### Widgets

#### Tabs - 标签页 `Tabs( selector, config )`

#### Slide - 卡盘 `Slide( selector, config )`

#### Carousel - 旋转木马 `Carousel( selector, config )`

#### Accordion - 手风琴 `Accordion( selector, config )`

以上 Widget 类的调用方法请参考：demo
还可以通过 class hook 和 data-ks-switchable 实现自动实例化：autorender demo

看了上面的文档，是否觉得平淡无奇？但请你一定相信，Switchable 能做的事情远比上面丰富。一定程度上，只要组件的核心是可切换的，Switchable 就能帮你实现。请静心等待更详细的 Getting Started 系列，精彩才刚上映。

home › switchable :