Switchable

switchable 是提供了 Tabs, Slide, Carousel 等功能的一个 jQuery 切换组件。

基础使用

HTML 结构

<div class="j-switchable" data-switch='json'><!-- Root 节点 加上 "switchable" Class 后就会自动初始化-->
    <div><!-- overflow: hidden 节点-->
        <ul class="items"><!-- 加上 "items" Class, 则子节点为面板列表 -->
            <li>
                <img src="img1.jpg">
            </li>
            <li>
                <img src="img2.jpg">
            </li>
            <li>
                <img src="img3.jpg">
            </li>
        </ul>
    </div>

    <!-- 上下翻页节点 带上相应 Class（不是必须的） -->
    <a href="###" class="prev disabled">&lt;</a><!-- 当不可用时候 JS 会加上 "disabled" 的 Class-->
    <a href="###" class="next">&gt;</a>

    <!-- trigger Class（不是必须的） -->
    <p class="slide-pagination">
        <a href="#1" class="active">1</a><!-- 当前面板 JS 会加上 "active" 的 Class-->
        <a href="#2" class="">2</a>
        <a href="#3" class="">3</a>
    </p>

    <!-- 指示数字节点（不是必须的） -->
    <div class="slide-text">1/3</div>
</div>

CSS 样式

.switchable > div { /* 容器 */
    width: 248px;
    height: 116px;
    position: relative;
    overflow: hidden;
}
.switchable .items { /* 面板父类 */
    margin: 0;
}
.switchable .items li {
    float: left; /* 如果是上下切换或者 fade 效果，则不需要 */
}

初始化配置

可以在 Root dom 节点配置 data-switch 为下面配置的值。

/**
 * 核心配置
 */
// 轮播的面板
panels: '.panels > *',

// 默认激活项
initIndex: 0,

// 切换动画
effect: 'none',

// 循环
loop: false,

// 切换前的回调
onBeforeSwitch: null,

// 切换后的回调
onSwitch: null

/**
 * 动画配置
 */
// 动画时长
duration: 500,

// 时间因子
easing: "ease"

/**
 * 动画效果：滑动（Scroll）
 */
// 水平滑动（false 为竖直滑动）
horiz: true

/**
 * 自动切换
 */
// 打开自动切换
autoplay: true,

// 切换间隔时间
interval: 3000,

// 鼠标悬停暂停切换
pauseOnHover: true,

// 是否逆序播放
isBackward: false

/**
 * 触发器配置
 */
// 选择器
triggers: '.trigger a',

// 当前 trigger 的 className
currentTrigger: 'active',

// 触发类型
triggerType: 'hover', // or 'click'

// 触发延迟
delay: 000, // 100ms


/**
 * 翻页配置
 */
prev: '.prev', // 翻页选择器
next: '.next',
disabledClass: 'disabled' // 翻页不可用时的 className

/**
 * 显示计数器配置
 */
// index偏移量
indexOffset: 1,

// 返回的格式
numFormat: '[index]/[length]',

// 选择器
switchNum: '.switch-num'

/**
 * lazyload 加载
 */
// DOM lazyload Class
lazyloadCls: 'switchlazyload'

在 JS 中初始化并传入初始化参数

在 Root 节点不传入 "j-switchable" ClassName，然后使用 JS 进行初始化

api = $(element).switchable({"loop":true,"autoplay":true});

使用 api 进行其他控制

使用 JS 初始化后将返回 api，自动初始化后可以通过取 DOM 上面的 switchable 对象得到 api

api = $('.switchable')[0].switchable;

switchable 提供了以下 API:

/**
 * 核心 API
 */
// root 节点 jQuery 对象
api.root

// 面板列表 jQuery 对象
api.panels

// 面板数量
api.length

// 当前位置（从0开始）
api.index

// 切换面板
api.switchTo(integer index); // 返回 API 本身

// 即将切换的下一面板
api.willTo(); // 有时候返回值会不准确（通过 trigger 切换的，无法预知，不影响在 beforeSwitch 中调用）

// 事件
beforeSwitch // 执行切换前调用

switch // 切换事件后调用

/**
 * 自动切换
 */
// 自动切换状态
api.paused

// 自动切换-播放
api.play()

// 自动切换-暂停
api.pause()

/**
 * 触发器配置
 */
// 触发器 jQuery 对象
api.triggers

/**
 * 翻页配置
 */
// 翻页按钮 jQuery 对象
api.prevBtn
api.nextBtn

事件绑定：

直接在 api 上面绑定 "switch/beforeSwitch" 事件即可

$(api).on("switch", function(e){
    console.log(e);
})