项目地址 返回首页

triggerType: 'click',表示鼠标点击时触发,activeIndex: 2,默认选中导航项的索引,执行默认参数

new tabs(".tabs1", { triggerType: 'click', activeIndex: 2, });

淡入淡出
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() 获取帧数