多功能轮播插件的使用

演示地址: http://jquerywidget.com/jquery-slider/


调用方法:

$(selector).slider(options,callback(api));


options参数

参数默认值说明
contentCls'content'轮播内容列表的class
navCls'nav'轮播导航列表的class
prevBtnCls'prev'向前一步的class
nextBtnCls'next'向后一步的class
activeTriggerCls'active'导航选中时的class
disableBtnCls'disable'按键不可用时的class
hoverCls'hover'当鼠标移至相应区域时获得的class
steps1移动帧数,'auto'为自动调整
direction'x'轮播的方向
reversefalse是否反向自动播放
inEndEffect'switch'播放到最后一帧时的效果:"switch"表示来回切换,"cycle"表示循环,"none"表示无效果
hasTriggerstrue是否含有导航触发点
triggerCondition'*'触发点的条件(有时需排除一些节点)
triggerType'mouse'导航触发事件类型:"mouse"表鼠标移入时触发,"click"表示鼠标点击时触发
activeIndex0默认选中帧的索引
pointerType'click'左右箭头的触发事件类型:"mouse"表鼠标移入时触发,"click"表示鼠标点击时触发
autofalse是否自动播放
animatetrue是否使用动画滑动
delay3000自动播放时停顿的时间间隔
immediatelyfalse悬浮是否立即停止
duration500轮播的动画时长
easing'easeIn'切换时的动画效果,可选的动画函数包括:swing,easeIn,easeOut,expoin,expoout,expoinout,elasin,elasout,elasinout,backin,backout,backinout,bouncein,bounceout,bounceinout
keyboardAblefalse是否允许键盘按键控制
touchabletrue是否允许触碰
sensitivity0.4触摸屏的敏感度,滑动当前帧的百分比移动该帧,该值越小越敏感
scrollablefalse是否允许滚动滚动轴时换屏
beforeEvent(status)[无]移动前执行,返回flase时不移动;传入一个对象,包含:index事件发生前索引,count帧长度,destination方向(prev向前,next向后,数字为相应的索引),event事件对象;
afterEvent(status)[无]移动后执行;传入一个对象,包含:index事件发生前索引,count帧长度,destination方向(prev向前,next向后,数字为相应的索引),event事件对象

callback(api)参数

方法说明
prev()向前一步
next()向后一步
start()开始播放
stop()停止播放
resize()重置幻灯片参数
setIndex(index,isAnimate)设置当前帧
setSteps(steps)设置移动帧数
setDelay(delay)设置动画停顿时间间隔
setDuration(duration)设置动画时长
getIndex()获取当前帧
getSize()获取帧数
getOptions()获取组件当前参数值

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部