iSlider Demo

iSlider

iSlider English Demo page
iSlider 示例

iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。它有如下特性:

  • 性能极好,硬件加速,极小占用内存
  • 能够自定义动画,自带的动画包括 default, rotate, depth, flow, flip, card, fade 等
  • 你能够简易地添加回调函数(islider.on('eventType', callback))
  • 支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动
  • 自动适配桌面鼠标动作与移动端手势,方便测试与跨平台使用
  • 支持图片预加载,改善用户体验
  • [Plugin]支持手势缩放,解决图片太大无法看清问题
  • [2.0+]支持更多种类的元素置入,自动匹配场景类型,识别图片并预加载
  • [2.0+]更完善的代理事件管理机制,优化内存占用

iSlider 结构说明

  • iSlider.js: iSlider核心代码库,定义iSlider类,绑定touch事件,图片预加载逻辑,以及图片翻页逻辑
  • iSlider.animate.js: islider滑动效果库,目前支持flip、depth、flow等翻页效果。 demo地址
  • iSlider.plugin.dot.js: 支持在图片上添加页码标示,支持点击翻页,以...展示。 demo地址
  • iSlider.plugin.button.js: 支持在图片上添加页码标示,支持点击翻页,以左右图标展示。 demo地址
  • iSlider.plugin.zoompic.js: 针对type为pic类型的滑动元素提供的手势缩放功能,支持android和ios中手势缩放功能,同时支持边缘检测。 demo地址

iSlider 示例

若是PC,请打开webkit浏览器进行测试

动画效果

demo代码

                    
                    
                

初始化:

选项 类型 说明
必要的
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的事件中注册回掉方法
  • slide
  • slideStart
  • slideEnd
  • slideChange
  • slideChanged
  • slideRestore
  • slideRestored
  • reloadData
  • destroy
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实例