1、综合参考 KissyJquery ,包括api和demo。

2、访问更多 slide.html demo.html

3、打包下载 download

4、其他:tab

Config Attributes

Config Attributes Detail

auto

{Boolean} - 是否自动切换, 默认为 true,开启后,不需要触发触发器,即可自动播放。

prefix

{String} - 默认为 'switchable-',自定义 class 前缀。

markupType

{Number} - 默认为0,指明 DOM 结构标记的类型, 可取 0, 1, 2。

当取 0 时,表示 DOM 是默认结构:通过 nav 和 content 来获取 triggers 和 panels,即通过配置以下两个参数获取。

navCls

{String} - triggers 所在容器的 class,默认为 'switchable-nav'。

contentCls

{String} - panels 所在容器的 class,默认为 'switchable-content'。

这种方式的 DOM 结构类似于:

<div id="J_Slide">  <!-- 容器元素 -->
    <div class="switchable-box">
        <ul class="switchable-nav">  <!-- 触发器列表 -->
            <li class="active">标题 A</li>
            <li>标题 B</li>
            <li>标题 C</li>
            <li>标题 D</li>
        </ul>
    </div>
    <div class="switchable-content">  <!-- 面板列表 -->
        <div>内容 A</div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
    </div>
</div>

当取 1 时,表示 DOM 结构 可适度灵活:通过 cls 来获取 triggers 和 panels,即通过配置以下两个参数获取。

triggerCls

{String} - 默认为 'switchable-trigger',会在 container 下寻找指定 class 的元素作为触发器。

panelCls

{String} - 默认为 'switchable-panel',会在 container 下寻找指定 class 的元素作为面板。

当取 2 时,表示 DOM 结构 完全自由:直接传入 triggers 和 panels,即通过配置以下两个参数获取。这种方式下,DOM 结构就非常自由了,传入什么内容有你自己定,只需要 triggers 和 panels 的数量保持一致就好。

triggers

{Array<HTMLElement>} - 默认为 空,触发器对象集合。

panels

{Array<HTMLElement>} - 默认为 空,触发器对象集合。

hasTriggers

{Boolean} - 默认为 true,是否有序号触发器。

controlThumbs

{Boolean} - 默认为 false,是否有缩略图触发器。

说明

true 时,自动创建容器 class 为 prefix + 'navCls' 有序列表。

caption

{Boolean} - 默认为 false,是否带有标题。

说明

true 时,自动创建容器 class 为 prefix + 'caption',内容为图片的alt或title属性,如果属性值带#号,则获取指定id的html。

steps

{Number} - 步长,表示每次切换要间隔多少个 panels,默认为 1。

interval

{Number} - 自动播放间隔时间, 以 ms 为单位,默认为 5000。

cur

{String} - 激活某个 trigger 时设置的 class ,默认是 'active'。

index

{Number} - 默认为 0,markup 的默认激活项,应该与此 index 一致。

evtype

{String} - 默认为 'mouse',触发类型,可选为 'mouse' 或 'click'。

delay

{Number} - 默认为 .1 ,触发延迟时间,单位为s。

view

{Object} - 可见视图区域的大小。如果 css 中不设置 panel 的高宽或初始没有 panel ,则需要这里手工指定大小,默认为 {width:0, height:0}。

说明

当 panel 的高宽 css 中不指定时,需要设置 view 为单个 panel 的高宽.

prevBtnCls

{String} - 默认为 'switchable-prev-btn' ,切换上一视图按钮元素的 class。

nextBtnCls

{String} - 默认为 'switchable-next-btn' ,切换下一视图按钮元素的 class。

disableBtnCls

{String} - 默认为 'switchable-disable-btn' ,触发器不可用时的 class。

effect

{String} - 默认为 'normal' ,可取 'random', 'normal', 'fade', 'scroll', 'fold', 'slice', 'slide', 'shutter', 'grow' 。

说明

1、'random' 为随机触发动画,对应 'fold', 'slice', 'slide', 'shutter', 'grow' 。

2、可以设置 'fold', 'slice', 'slide', 'shutter', 'grow' 中任意组合随机,中间用英文逗号分割,如 'fold, slice' 。

3、注意:'normal', 'fade', 'scroll'为独立效果与之一或其他都不可以搭配。

direction

{String} - 默认为 'x' ,动画特效移动方向,'x' 或 'y'

speed

{Number} - 默认为 1000,动画的时长。

说明

和jquery同步,可以为 'normal', 'slow', 'fast' 或 数值

easing

{String|Function} - 动画效果,默认为 'swing'。

circular

{Boolean} - 是否循环切换,默认为 true,是否循环播放,当切换到最初/最后一个时,是否切换到最后/最初一个。

slices

{Number} - effect 为 'slice', 'fold' 时,定义碎片的数量,默认 15。

shutters

{Object} - effect 为 'shutter', 'grow' 时,定义碎块的横向和纵向的数量,默认 cols: 8, rows: 4 。

pauseOnHover

{Boolean} - evtype 为 mouse 时,鼠标悬停在 slide 上是否暂停自动播放,默认为 true。

pauseOnScroll

{Boolean} - 当 slide 对象不在可视区域中时停止动画切换,默认为 false。

callback

{Object} - 默认。

说明

暂无