简介

agilebins.js 是一款基于 jquery 运行的免费开源特效插件。快速解决网页大部分特效。使用简单维护方便，无需懂得 js 代码编写。轻松制作，导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动，选项卡内容切换、手风琴折叠效果等。兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。

（下载的附件中附有完整DEMO）

使用

1.  引入文件

<script type="text/javascript" src="jquery.min.js"></script> <!-- 必须存在1 -->
<script type="text/javascript" src="jquery.agilebins-v1.0.4.min.js"></script> <!-- 必须存在2 -->

2.  HTML

<div class="domo-slides"> <!-- 此为父层，添加调用时需要用到此处的class名 -->
  <div class="conts"> <!-- 此为mainEl内容列表容器层，添加mainEl调用时需要用到此处的class名 -->
     <ul>
       <li><img src="images/pic1.jpg" width="480" height="260" /></li>
       <li><img src="images/pic2.jpg" width="480" height="260" /></li>
       <li><img src="images/pic3.jpg" width="480" height="260" /></li>
     </ul>
   </div>
  <div class="tabs"><ul></ul></div> <!-- 此为mainState导航列表容器层，调用时需用到此class名 -->
</div>

CSS
<style type="text/css">
    * { margin:0; padding:0; }
    body { background:#fff; font-size:12px; }
    ul,li { list-style:none; }
    p { word-wrap:break-word; }
    img { border:0; vertical-align:middle; }
    a { color:#333; text-decoration:none; }
    a:hover { color:#1974A1; text-decoration:none; }
    /* domo-slides为此例子父层class名 */
    .domo-slides { width:480px; height:260px; zoom:1; margin:260px auto auto auto; position:relative; overflow:hidden; }
    /* conts为此例子mainEl内容列表容器层class名 */
    .domo-slides .conts { width:480px; height:260px; border-radius:8px; overflow:hidden; }
    .domo-slides .conts li { width:480px; height:260px; text-align:center; overflow:hidden; }
    /* tabs为此例子mainState导航列表容器层class名 */
    .domo-slides .tabs { width:480px; height:11px; line-height:11px; position:absolute; z-index:1; left:0; bottom:30px; overflow:hidden; } 
    .domo-slides .tabs ul { text-align:center; height:11px; }
    .domo-slides .tabs ul li { line-height:999px; width:11px; height:11px; border-radius:11px; margin:0 5px; background:#b2d5ed; cursor:pointer; display:inline-block; *display:inline; zoom:1; overflow:hidden; } /* 此处line-height:999px;设为line-height:11px;分页会显示数字出来 */
    .domo-slides .tabs ul li.current { background:#4ad585; }
</style>

3.  调用

<script type="text/javascript">
  $(".domo-slides").agilebins({
    autoPlay: true, /* 自动播放(true | false) */
    delayTime: 3000, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
    loop: true, /* 无限循环播放(true | false) */
    mainEl: ".conts ul", /* 内容列表容器 */
    mainState: ".tabs ul", /* 导航列表容器（当前为圆圈，此line-height:设为你的圆圈高度;可显示出数字分页）*/
    autoMainState: true, /* 是否开启自动填充导航HTML元素。与mainState配合使用。 */
    onClass: "current", /* 当前选中的索引亮高css样式名 */
    effect: "left", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
  });
</script>

相关链接

官网地址 ：http://ab.geshai.com/

GitHub 地址 ：https://github.com/xiaomingmm/agilebins