iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。它有如下特性:
若是PC,请打开webkit浏览器进行测试
选项 | 类型 | 说明 |
必要的 | ||
dom | {HTML Element} | 容器节点 |
data | {array} |
数据列表:
[{ content:'{url|HTML string|element|fragment}', }, ...] |
配置项 | ||
type (已废弃) | - | - |
duration | {number} | 单位:毫秒,在自动播放模式中,设置每个场景的停留时间 |
animateType | {string} | 动画效果,目前支持默认default, rotate, depth, flow, flip and card |
animateTime | {number} | 单位:毫秒,动画效果持续时间 |
animateEasing | {string} | 动画效果曲线,支持linear, ease, ease-in, ease-out, ease-in-out以及自定义的cubic-bezier曲线 |
isDebug | {boolean} | 开启/关闭调试模式,会打印更多日志信息,默认:false(关闭) |
isLooping | {boolean} | 开启/关闭循环模式,默认:false(关闭) |
isAutoplay | {boolean} | 开启/关闭自动滑动模式,默认:false(关闭) |
isVertical | {boolean} | 开启水平/垂直滑动模式,默认:false(关闭) |
isOverspread | {boolean} | 如果场景为图片模式,是否平铺整个浏览器屏幕(CSS3背景),默认:false(关闭) |
initIndex | {number} | 默认首屏所使用的数据列表索引 |
fixPage | {boolean} | 是否禁用垂直滚动和回弹效果,默认:true(开启) |
plugins | {array} |
启用插件,可为插件名称列表:
['dot', 'button', 'zoompic', ...]当然,还可以这样写,支持传入更多的插件初始化参数 [..., ['zoompic', {zoomFactor: 2}], ...] |
事件 | ||
onslide | {function} | 手指滑动时的回调函数 |
onslidestart | {function} | 手指触屏时的回调函数 |
onslideend | {function} | 手指离开屏幕时的回调函数 |
onslidechange | {function} | 当场景发生改变时触发的回调函数 |
onslidechanged | {function} | 当场景改变完成(动画完成)时触发的回调函数 |
onsliderestore | {function} | 当场景未发生变化时触发的回调函数 |
onsliderestored | {function} | 当场景未发生变化完成(回弹动画完成)时触发的回调函数 |
方法 | 参数 | 说明 |
静态方法 | ||
extend |
[{object} 原对象(可选)]
{object} 新对象 |
当参数长度为1时,将参数对象继承到iSlider.prototype
当参数长度为2时,将第二个对象继承到第一个 |
regPlugin |
{string} 插件名称
{function} 插件初始化方法 |
注册插件 |
实例方法 | ||
slideTo |
{number} 数据列表索引
[{object} 临时配置(可选)] |
滚动到第n个场景,可以在第二个参数设置配置信息,改变本次滑动的动画效果: animateTime animateType |
slideNext | [{object} 临时配置(可选)] | 滚动到后一场景,可以设置配置信息,改变本次滑动的动画效果: animateTime animateType |
slidePrev | [{object} 临时配置(可选)] | 滚动到前一场景,可以设置配置信息,改变本次滑动的动画效果: animateTime animateType |
delegate |
{string} 事件名称
{string} 选择器 (querySelectorAll) {function} 事件响应方法 |
在容器node上绑定代理事件 |
bind | delegate 的别名 | |
on |
{string} 事件
{function} 回掉方法 |
在iSlider的事件中注册回掉方法
|
off |
{string} 事件
{function} 回掉方法 |
从iSlider的事件中移除回掉方法 |
fire | 随相应事件变化 | 出发某个事件 |
play | 开始自动切换(必须在自动播放模式中) | |
pause | 暂停自动切换(必须在自动播放模式中) | |
extend | 同iSlider.extend | |
regPlugin | 同iSlider.regPlugin,注册的同时会自动加入激活的插件列表中,并自动执行初始化 | |
loadData | {array} 数据列表 | 载入数据列表 |
hold | 当前场景禁止手势 | |
unhold | 当前场景开启手势,同时解除锁定 | |
lock | 锁定当前场景,禁用sliceTo, slideNext, slidePrev方法,同时禁止手势 | |
unlock | 解除锁定 | |
destroy | 销毁当前iSlider实例,内存释放 | |
reset | 复位当前iSlider实例 |