建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery特效轮播插件agilebi

来源:易助科技网浏览量:8收藏

简介


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