初步了解认识
Agilebins
是一个基于jQuery
运行的开源特效插件,快速解决网页大部分特效。使用简单,维护方便。无需懂得js代码编写。轻松制作,导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动,选项卡内容切换、手风琴折叠效果等。兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。
1.获取agilebins-v1.0.4下载地址:GitHub|百度网盘 ( zip资源包 )|阿里云盘 ( exe资源包 )|Gitee
2.引用插件点此去查看,插件的基础使用范例详细说明。 或直接下载基础的具体使用范例演示 百度网盘|阿里云盘
3.使用Agilebins遇到任何疑难的问题,可选择QQ群① 158544200或QQ群② 790370978进行反馈咨询。
效果类型,可选 slide
| menu
|box
slide
为幻灯切换,跑马灯,滚动效果等...
menu
为菜单下拉效果。
box
为盒子层div
元素,当鼠标点击盒子层元素区域以外的HTML元素,则盒子层元素将关闭(隐藏)。
默认:slide
滑动方向,top
向上|right
向右|bottom
向下| left
向左。
当type
为slide
时有效。
默认:left
向左
内容列表集合HTML
容器元素选择器。如 幻灯图片列表容器ul
元素。
<ul>
<li><img alt="图片1" src="1.jpg"/></li>
<li><img alt="图片2" src="2.jpg"/></li>
</ul>
滚动列表集合HTML
容器元素选择器。如 滚动图片列表容器ul
元素。
<ul>
<li><img alt="图片1" src="1.jpg"/></li>
<li><img alt="图片2" src="2.jpg"/></li>
</ul>
滚动按钮HTML
元素,上一组(页)。一般配合scrollEl
参数一同使用。
滚动按钮HTML
元素,下一组(页)。一般配合scrollEl
参数一同使用。
幻灯切换按钮HTML
元素,上一个。一般配合mainEl
参数一同使用。
幻灯切换按钮HTML
元素,下一个。一般配合mainEl
参数一同使用。
导航列表HTML
容器元素。来源为mainEl
内容列表集合所产生的个数。如果该HTML
元素容器里不包含任何嵌套HTML
,则自动填充为mainEl
所产生的列表个数,反之则为该容器里自定义嵌套的HTML
为导航。
要填充的HTML
子元素标签名,与mainState
配合使用,将要填充到mainState
容器里。
默认:标签名为li
。这时mainState
参数,则应为ul
。
注意:如单标签<br/>
除外。
统计显示内容个数HTML
容器元素。来源为mainEl
内容列表集合所产生的个数。
如: 显示为 1/10 形式。
滚动分组页HTML
容器元素。来源为scrollEl
滚动列表集合所产生的分组页。如果该HTML
元素容器里不包含任何嵌套HTML
,则自动填充为scrollEl
所产生的列表分组页,反之则为该容器里自定义嵌套的HTML
为分组页。
要填充的滚动分组页HTML
子元素标签名,与pageState
配合使用,将要填充到pageState
容器里。
默认:标签名为li
。这时pageState
参数,则应为ul
。
注意:如单标签<br/>
除外。
统计显示滚动分组(页)总数HTML
容器元素。来源为scrollEl
滚动列表集合所产生的分组(页)总数。
如: 显示为 1/5 形式。
屏蔽mPrev
按钮的HTML
标签样式状态class
名。当index <= 1
,且loop : false
orpnLoop : false
时生效。
默认:off
屏蔽mNext
按钮的HTML
标签样式状态class
名。当index >= mainEl
内容列表集合所产生的总数,且loop : false
orpnLoop : false
时生效。
默认:off
屏蔽sPrev
按钮的HTML
标签样式状态class
名。当page <= 1
,且loop : false
orpnLoop : false
时生效。
默认:off
屏蔽sNext
按钮的HTML
标签样式状态class
名。当page >= scrollEl
滚动列表集合所产生的分组(页)总数,且loop : false
orpnLoop : false
时生效。
默认:off
当前HTML
标签元素亮高样式class
名。表示当前选中(指针指向)的mainEl
第index
索引元素。
默认:on
非当前HTML
标签元素默认样式class
名。表示非当前选中(指针指向)的mainEl
第index
索引元素。
默认:off
绑定事件类型。如:mouseover
|click
默认:mouseover
设置是否以当前mainEl
,scrollEl
容器元素本身为列表集合元素。当前值为false
时,则以容器子元素为列表集合。反之,则以容器元素本身为列表集合元素。
如手风琴
类似切换效果,将值设为true
即可。
默认:false
是否需要无限循环。
默认:false
注意:当设置为sEffect : marquee
时,该参数无效。
是否需要按钮前后循环。
当值为false
时,切换到第一个(组/页)或最后一个(组/页),将不再返回。
默认:true
是否需要自动播放。
默认:false
注意: 当值为true
时,则必须将pnLoop : true
,循环自动播放才能生效。反之,则为一次性自动播放。
设置scrollEl
滚动列表集合,允许显示的数量。
默认:1
注意:当设置为sEffect : marquee
时,该参数无效。
设置scrollEl
滚动列表集合,每组(页)可滑动的数量。
默认:1
注意:当设置为sEffect : marquee
时,该参数无效。
自动播放延迟时间,时间单位为毫秒(如3500
)。值越大,则等待的时间越长。
默认:3500
注意: 该设置值必须为delayTime >= speed >= 0
,delayTime >= sSpeed >= 0
,delayTime >= triggerTime >= 0
的值。
eventType
事件触发延迟时间,时间单位为毫秒(如50
)。值越大,则等待的时间越长。
默认:50
注意: 该设置值必须为delayTime >= triggerTime >= 0
的值。
设置mainEl
容器列表集合,播放过渡效果延迟时间。时间单位为毫秒(如350
)。值越大,则等待的时间越长。
默认:350
注意: 该设置值必须为delayTime >= speed >= 0
的值。
设置scrollEl
容器列表集合,播放过渡效果延迟时间。时间单位为毫秒(如350
)。值越大,则等待的时间越长。
默认:350
注意: 该设置值必须为delayTime >= speed >= 0
的值。
设置mainEl
容器列表集合,播放过度效果类型。默认可选:fade
fold
slideDown
top
right
bottom
left
。
查看更多easing缓动效果调试。
默认:fade
注意:使用easing
其他缓动效果,请引用jQuery(jquery.easing.min.js)
缓动效果插件。
循环无缝隙滚动效果。设置滚动scrollEl
列表集合。
值为sEffect : marquee
注意:必须设置autoPlay : true
才生效。
循环无缝隙滚动,滚动步长。当设置值sEffect : marquee
时有效。值越大滚动跨度越大,反之则跨度越小。
默认:1
索引号,设置显示第 n
的一个。来源为mainEl
列表集合索引号,从0
开始。
默认:0
设置当前index
索引号元素,是否允许隐藏(关闭)。
默认:false
播放按钮HTML
标签元素。当点击该按钮时,效果开启自动播放。
注意:循环播放时值应为pnLoop : true
暂停按钮HTML
标签元素。当点击该按钮时,效果暂停播放。
是否开启自动填充分组(页)HTML
元素。与pageState
配合使用。
默认:false
是否开启自动填充导航HTML
元素。与mainState
配合使用。
默认:false
是否开启默认显示。
默认:true
是否开启返回默认defaultShow
状态。当type : box
或type : menu
,配合defaultShow
使用。
默认:false
是否开启当鼠标悬浮在,当前容器层区域内,暂停播放。
默认:false
是否开启当鼠标悬浮在,当前容器层区域内,显示按钮元素。反之鼠标离开,则隐藏按钮元素。配合焦点图幻灯
效果比较实用。
默认:false
是否开启鼠标轮滚事件,用作代替上下按钮。配合全屏切换
效果比较实用。
默认:false
是否同时开启mainEl
和scrollEl
结合使用。当在组图展示
效果时,比较实用。
默认:true
是否开启自动定位识别模式。当type : menu
或type : box
时比较实用。
默认:false
注意:当值为true
时,mainEl
容器css
样式属性position
、top
、right
、bottm
、left
值,请忽略。避免与自动定位识别模式css
样式冲突。若需要位置偏差,请配合使用addX
或addY
值。
设置mainEl
容器css
样式left
、right
属性值。当type : menu
或type : box
时生效。
默认:0
设置mainEl
容器css
样式top
、bottm
属性值。当type : menu
或type : box
时生效。
默认:0
设置type: menu | box
,菜单列表选项事件绑定元素。
属性iTrigger
元素,绑定的事件响应回调扩展函数。
函数返回参数变量有:
el:iTrigger
元素当前选中对象
设置type: menu
,阻止事件冒泡,当有嵌套三级以上下拉菜单时设为false
。
默认:false
执行动画效果之前时的回调扩展函数。
函数返回参数变量有:
index:索引编号
total:mainEl
产生的总数量
page:当前分组(页码)
pageTotal:分组总(页码)数量
mainState:mainState
导航集合
pageState:pageState
分组(页)集合
scrollEl:scrollEl
列表集合
mainEl:mainEl
列表集合
执行动画效果完成后的回调扩展函数。
函数返回参数变量有:同startFunc
一致。
效果结束后的回调扩展函数。当type : menu
或type : box
时有效。
函数返回参数变量有:同startFunc
一致。
初始化回调扩展函数。
实例化对象之前执行,可使用形参参数:当前容器对象元素。
1. 请检查jQuery.min.js
和jquery.agilebins-v1.0.3.min.js
文件顺序,及$(容器盒子元素).agilebins({})
调用是否正确。
2. 参数值设置是否正确。
3. 可能你引入的其他JavaScript
文件与jQuery
文件冲突。可以尝试jQuery(容器盒子元素).agilebins({})方式调用。
如:
startFunc : function(index, total, page, pageTotal, mainState, pageState, mainEl, scrollEl){ // 你的扩展实现代码写在这里...}