-
Notifications
You must be signed in to change notification settings - Fork 1
codetker/myBoxScroll
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
插件效果:
实现常见的盒子图片滚动效果(或称图片轮播)
可修改后附加缓动函数,实现多种效果,详情见缓动函数表 http://easings.net/zh-cn#easeInOutQuad
Github https://github.com/codetker/TokenFamily
html 结构(ZenCoding形式)
-div.divClass
-div.toLeft
-div.toRight
-ul.ulClass
-li.liClass*n
-ul.controlUl
-li*n
其中div.toLeft,div.toRight,ul.controlUl可选
调用方法(详情见demo)(按需设置参数)
A.divClass调用时style为1,采用scroll-left
$(".divClass").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际移动元素,默认为li元素
'style': 1, //默认为0,为margin-left,1则为scroll-left
'stepTime': 1, //每次运动经历的时间,单位s,默认为1s
'direction': 'right', //运动的方向,默认为right
'toLeft': '.arrowLeft', //向左运动按钮,默认为null
'toRight': '.arrowRight', //向右运动按钮,默认为null
'ControlUl': '.picControl ul', //控制运动按钮,默认为null
'circle': true, //是否自动滚动,默认true
'circleTime': 5 //自动滚动时间间隔,默认5s
});
B.ulClass调用时style为0,采用margin-left
$(".ulClass").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际移动元素,默认为li元素
'style': 0, //默认为0,为margin-left
'stepTime': 1, //每次运动经历的时间,单位s,默认为1s
'direction': 'right', //运动的方向,默认为right
'toLeft': '.arrowLeft', //向左运动按钮,默认为null
'toRight': '.arrowRight', //向右运动按钮,默认为null
'ControlUl': '.picControl ul', //控制运动按钮,默认为null
'circle': true, //是否自动滚动,默认true
'circleTime': 5 //自动滚动时间间隔,默认5s
});
C.div.Class or Ul.Class调用时style为1,采用fadeIn and FadeOut
$(".picInnerBox").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际变化元素,默认为li元素
'style': 2, //2为fadeIn and fadeOut
'direction': 'right', //滚动方向
'toLeft': '.arrowLeft', //向左运动按钮,默认为null,为了避免快速多次点击,设置点击间隔时间至少0.8s
'toRight': '.arrowRight', //向右运动按钮,默认为null,为了避免快速多次点击,设置点击间隔时间至少0.8s
'ControlUl': '.picControl ul', //控制运动按钮,默认为null
'circle': true, //是否自动变化,默认true
'circleTime': 5, //自动变化时间间隔,默认5s
'fadeInTime': 300, //fadeIn时间设置
'fadeOutTime': 400 //fadeOut时间设置
});
运行demo
最简单的方法为改Default.html中jquery对应script元素的src为本地的jquery(离线)或CDN中的jquery(在线),然后双击Default.html即可
或者配置myBoxScroll.jquery.json or package.json
PS:
为了使插件总大小较小、代码复用,将A,B,C三种情况集中在一起,封装为一个原型上的方法,内部依据style控制选择。
也可以改为多个方法在绑定到jquery原型上时用style判断对应执行,以减少多余变量和不必要的判断。