使用说明
轻松制作网页中的导航菜单、幻灯片、焦点图、公告跑马灯、图片
滚动，选项卡内容切换、手风琴折叠效果等。
一. 基础使用设置
注意：在网页的头部引用jQuery和agilebins两个必需的js既将jquery和agilebins包含在head标中或位于关闭正文标记之前。请确保在agilebins之前包含jquery前后顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-slides演示例子</title>
6. <script type="text/javascript" src="jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="jquery.agilebins-v1.0.4.min.js"></script> <!-- 必须存在2 -->
8. </head>
9. <body>
二. 编写html代码
注意：创建一个div的父层，在其内部为每一个幻灯片创建一个目标元素，使用css控制其样式。jquery.agilebins-v1.0.4.min.js将选定父层元素内的层标签与样式应用于它们，并按照您的喜好定位。
1. <div class="domo-slides"> <!-- 此为父层，添加调用时需要用到此处的class名 -->
2. <div class="conts"> <!-- 此为mainEl内容列表容器层，添加mainEl调用时需要用到此处的class名 -->
3. <ul>
4. <li><img src="images/pic1.jpg" width="480" height="260" /></li>
5. <li><img src="images/pic2.jpg" width="480" height="260" /></li>
6. <li><img src="images/pic3.jpg" width="480" height="260" /></li>
7. </ul>
8. </div>
9. <div class="tabs"><ul></ul></div> <!-- 此为mainState导航列表容器层，调用时需用到此class名 -->
10. </div>
三. 编写例子css样式
注意：编写 html 和 css 样式时一定要注意，父层元素和容器层元素，都必须具有指定的宽度和高度，jquery.agilebins-v1.0.4.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#fff; font-size:12px; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#333; text-decoration:none; }
8. a:hover { color:#1974A1; text-decoration:none; }
9. /* domo-slides为此例子父层class名 */
10. .domo-slides { width:480px; height:260px; zoom:1; margin:260px auto auto auto;
11. position:relative; overflow:hidden; }
12. /* conts为此例子mainEl内容列表容器层class名 */
13. .domo-slides .conts { width:480px; height:260px; border-radius:8px; overflow:hidden; }
14. .domo-slides .conts li { width:480px; height:260px; text-align:center; overflow:hidden; }
15. /* tabs为此例子mainState导航列表容器层class名 */
16. .domo-slides .tabs { width:480px; height:11px; line-height:11px; position:absolute; z-index:1; left:0;
17. bottom:30px; overflow:hidden; }
18. .domo-slides .tabs ul { text-align:center; height:11px; }
19. .domo-slides .tabs ul li { line-height:999px; width:11px; height:11px; border-radius:11px;
20. margin:0 5px; background:#b2d5ed; cursor:pointer; display:inline-block; *display:inline;
21. zoom:1; overflow:hidden; } /* 此处line-height:999px;设为line-height:11px;分页会显示数字出来 */
22. .domo-slides .tabs ul li.current { background:#4ad585; }
23. </style>
四. 调用参数的设置
注意：在要使用效果的div父层外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，方便维护与管理。注意调用代码必须放在引用jquery和agilebins之后的位置
1. <script type="text/javascript">
2. $(".domo-slides").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. delayTime: 3000, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
5. loop: true, /* 无限循环播放(true | false) */
6. mainEl: ".conts ul", /* 内容列表容器 */
7. mainState: ".tabs ul", /* 导航列表容器（当前为圆圈，此line-height:设为你的圆圈高度;可显示出数字分页）*/
8. autoMainState: true, /* 是否开启自动填充导航HTML元素。与mainState配合使用。 */
9. onClass: "current", /* 当前选中的索引亮高css样式名 */
10. effect: "left", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
11. });
12. </script>
13. </body>
14. </html>
更新记录
agilebins快速解决网页中大部分的特效展示，使用简单维护方便，无需懂得JS代码编写。
兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。
32.优化v1.0.4 无缝隙滚动(marquee)内容自适应。2022年9月17日
下载地址：GitHub( zip资源包 )、百度网盘( zip资源包 )、阿里云盘( exe资源包 )、Gitee( zip资源包 ) 已为最新版
31.v1.0.4 新增实例化Api接口（slide(i:第n个):轮播图滑动触发、mPrev():轮播图上一个触发、mNext():轮播图下一个触发、scroll
(page:第n页): 多图滚动触发、sPrev(): 多图滚动上一页触发、sNext(): 多图滚动下一页触发），实例化参数
（el:实例化对象容器），细节调优。2022年9月12日
30.AgileBins v1.0.4 发布。 2022年9月10日
29.修复v1.0.3 menu类型嵌套多级下拉菜单，当鼠标移开导航后菜单不收回的问题。2022年9月5日
28.修复v1.0.3 menu类型下拉菜单，会循环不停闪动的问题。2022年9月2日
27.AgileBins v1.0.3 发布。 2014年12月27日
26.v1.0.2.9 新增属性iTrigger、iTriggerFunc菜单选项触发事件扩展数。 2014年11月26日
25.修复v1.0.2.8 在同一个页面调用多个效果导致卡顿，效果动画无效的问题。 2014年11月20日
24.修复v1.0.2.7 引用jquery不同版本之间的差异兼容问题。 2014年11月17日
23.v1.0.2.6 新增鼠标滑过延迟参数，体验优化。。 2014年11月13日
22.v1.0.2.5 细节优化。 2014年9月12日
21.v1.0.2.5 新增播放/暂停按钮功能、监听轮播图鼠标轮滑下一个/上一个。。 2014年7月18日
20.v1.0.2.4 新增执行动画缓动效果(依赖jquery.easing)。。 2014年6月15日
19.v1.0.2.4 新增组图联动预览。。 2014年6月12日
18.修复v1.0.2.3 IE9下兼容和细节优化。 2014年3月12日
17.修复v1.0.2.3 menu、box细节问题，及其他细节优化。 2013年11月28日
16.v1.0.2.2 新增menu、box自动定位。自动根据菜单遮住显示不全时，自动调整上下左右位置。 2013年8月19日
15.v1.0.2.1 新增endFunc效果结束后的回调扩展函数。 2013年4月25日
14.Allocate 更名为 AgileBins 同时v1.0.2发布 。 2013年4月25日
13.优化v1.0.1.7 内置默认参数和兼容细节处理。 2012年12月18日
12.优化v1.0.1.6 焦点图和图文滚动，显示当前第n个、当前第n页和分页页码总数。 2012年10月16日
11.v1.0.1.5 新增box类型菜单(点击菜单以外HTML元素，关闭菜单展示)、startFunc执行动画前回调扩展函数、completeFunc
执行动画效果完成后的回调扩展函数。 2012年6月7日
10.修复v1.0.1.4 IE6兼容问题。 2011年9月17日
9.修复v1.0.1.3 细节问题和图文无缝隙滚动。 2011年5月13日
8.v1.0.1.3 新增图文无缝隙滚动。 2011年5月11日
7.修复v1.0.1.2 焦点轮播图和选项卡细节问题，和新增选项卡支持全部折叠。 2010年12月29日
6.v1.0.1.2 新增menu类型导航菜单下拉，支持hover(鼠标悬停)事件和click(点击)事件。 2010年12月13日
5.v1.0.1.1 新增图文上下方向滚动。 2010年12月03日
4.v1.0.1 新增图文左右方向滚动效果、折叠(手风琴)效果。 2010年11月17日
3.优化v1.0 轮播焦点图灵活调用问题。 2010年10月19日
2.Allocate-v1.0 诞生了，轮播焦点图、选项卡切换 2010年10月10日
1.格晒特效插件规划之旅。 2010年09月16日
Agilebins是一个基于jQuery运行的开源特效插件
快速解决网页中大部分的特效展示，使用简单维护方便，无需懂得JS代码编写。
轻松制作导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动，选项卡内容切换、手风琴折叠效果等。
兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。
agilebins下载地址：GitHub、百度网盘、阿里云盘、Gitee 已为最新
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题