初始化
优质
小牛编辑
146浏览
2023-12-01
new iSlider(DOM, DATA, OPTIONS)
Name | Type | Description |
---|---|---|
DOM | dom | 容器dom节点 |
DATA | Array | 数据列表 |
OPTIONS | Object | 配置项 |
DOM
new iSlider(DOM, DATA, OPTIONS);
{HTMLElement}
- 容器dom节点
- 作为第一个参数并不是必须的,会被OPTIONS.dom覆盖,但是这十分必要,它可以使你更便捷的使用iSlider。
DATA
new iSlider(DOM, DATA, OPTIONS);
{Array}
- 数据列表
- 作为第二个参数并不是必须的,会被OPTIONS.data覆盖,但是这十分必要,它可以使你更便捷的使用iSlider。
- 允许的类型:URLString、HTMLString、HTMLElement、HTMLFragment。
- TODO:目前成员为{Object}类型,只支持content属性,在将来会得到更多的扩展,比如配置每一场景的切换效果、等待时间等等
- 数据格式:
[
{
content: '{URLString|HTMLString|HTMLElement|HTMLFragment}'
},
...
]
OPTIONS
类型: {Object}
描述: 作为第一个参数并不是必须的,会被OPTIONS.dom
覆盖,但是这十分必要,它可以使你更便捷的使用iSlider。
dom
{HTMLElement}
- 容器dom节点,作用同参数DOM,若设置此项,DOM会被覆盖。
data
{Array}
- 数据列表,作用同参数DATA,若设置此项,DATA会被覆盖。
animateType
{String}
- 动画效果
- 目前支持:default(卷动)、rotate(旋转)、depth、flow、flip、card、fade(渐显/隐)、zoomout(向外/内缩放)
- 前置条件:载入效果库 iSlider.animate(.min).js
- 默认:”default”
animateTime
{Number}
- 动画效果持续时间
- 单位:毫秒
- 默认:1000
animateEasing
{String}
- 动画效果曲线
- 可选 linear、ease、ease-in、ease-out、ease-in-out,甚至cubic-bezier
- 默认:ease
isAutoplay
{Boolean}
- 开启/关闭自动滑动模式
- 默认:false(关闭)
duration
{Number}
- 自动播放时,场景停留时间
- 每个场景停留时间,结束时会切换至下一场景
- 单位:毫秒
- 前置条件:isAutoplay ===
TRUE
isLooping
{Boolean}
- 循环播放模式
- 默认:false(关闭)
isVertical
{Boolean}
- 垂直滑动模式
- 默认:false(关闭)
isOverspread
{Boolean}
- 背景平铺
- 如果场景为图片模式(URL),使用CSS3背景的方式填充场景
- 默认:false(关闭)
isTouchable
{Boolean}
- 触屏事件
- 默认:true(开启)
isDebug
{Boolean}
- 开启/关闭调试模式,会打印更多日志信息
- 默认:false(关闭)
initIndex
{Number}
- 首屏所使用的数据列表索引
- 默认:0
fingerRecognitionRange
{Number}
- 误触识别范围,大于范围值的touchMove被视为有效滑动距离
- 默认:10(px)
fixPage
{Boolean|Array|String}
- 原生事件阻止
- 场景内屏蔽原生事件的触发,如:滚动、拖拽、缩放等
- “A”元素,阻止,移动端建议使用自定义的tap(touch系事件联合判断)
- 对表单类元素”SELECT”、”INPUT”、”TEXTAREA”、”BUTTON”、”LABEL”,任何情况下均不进行阻止
- *排除策略:若参数类型为字符串(规则,querySelector选择器字符串)或数组(多个规则),此选项为开启状态(true)并排除复合规则的元素,与
iSlider.FIX_PAGE_TAGS
相同对待
- 默认:true(开启)
fillSeam
{Boolean}
- 填补场景间接缝
- 在某些系统的浏览器中存在的渲染问题,造成场景间出现一条缝隙,这种情况在场景设置了背景色并且使用相连的切换效果时尤为明显。
- 默认:false(关闭)
plugins
{Array}
- 启用插件并配置初始化参数
- 传入欲激活的插件名称列表:
['dot', 'button', 'zoompic', ...]
,另外,支持传入初始化参数:[..., ['zoompic', {zoomFactor: 2}], ...]
- 若插件未被载入或不存在则忽略