- 这里是内容1
- 这里是内容2
- 这里是内容3
- 这里是内容4
triggerType: 'click',表示鼠标点击时触发,activeIndex: 2,默认选中导航项的索引,执行默认参数
new tabs(".tabs1", { triggerType: 'click', activeIndex: 2, });
- 幻灯片1
- 幻灯片2
- 幻灯片3
- 幻灯片4
淡入淡出
effect:'fade','fade'表淡入淡出效果,默认值/none,执行默认参数
new tabs(".tabs2", { effect:'fade' });
前后切换,自动播放
effect:'fade','fade'表淡入淡出效果,auto: true,自动播放,默认值/false,鼠标经过停止,鼠标离开播放。执行默认参数
new tabs(".tabs3", { effect:'fade', auto: true, });
调用方法:
new tabs(selector,{options};
options参数
参数 | 默认值 | 说明 |
---|---|---|
contentCls | 'content' | 内容列表的class |
navCls | 'nav' | 导航列表的class |
prevBtnCls | 'prev' | 向前一步的class |
nextBtnCls | 'next' | 向后一步的class |
activeCls | 'active' | 导航选中时的class |
effect | 'none' | 切换的效果:'none'表直接切换,'fade'表淡入淡出效果 |
triggerType | 'mouse' | 切换时的触发事件类型:"mouse"表鼠标移入时触发,"click"表示鼠标点击时触发 |
triggerCondition | * | 导航项的条件 |
activeIndex | 0 | 默认选中导航项的索引 |
auto | false | 是否自动播放 |
delay | 3000 | 自动播放时停顿的时间间隔 |
beforeEvent | [无] | 切换前执行,返回flase时不移动;传入一个对象,包含:index事件发生前索引,count帧长度,destination目标索引,event事件对象 |
afterEvent | [无] | 切换后执行;传入一个对象,包含:index事件发生前索引,count帧长度,destination目标索引,event事件对象 |
callback(api)参数
方法 | 说明 |
---|---|
setIndex(value) | 切换标签页 |
stop() | 停止自动播放 |
start() | 开始自动播放 |
getIndex() | 获取当前帧 |
getSize() | 获取帧数 |