JQuery特效轮播插件agilebi

简介

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