agilebins.js is a free open source special effect plugin based on jquery. Quickly solve most special effects of web pages. Easy to use and maintain, no need to know how to write js code. Easy to make, navigation menu, slideshow, focus map, announcement marquee, picture scrolling, tab content switching, accordion folding effect, etc. Compatible with most browsers such as IE6+ Safari Opera Firefox Chrome.

new version update:

– Optimize v1.0.4 seamless scrolling (marquee) content adaptation. September 17, 2022

– v1.0.4 added instantiated API interface (slide(i: nth): slide trigger of carousel, mPrev(): previous trigger of carousel, mNext(): next trigger of carousel, scroll( page: nth page): multi-image scroll trigger, sPrev(): multi-image scroll previous page trigger, sNext(): multi-image scroll next page trigger), instantiation parameters (el: instantiated object container), details Tuning. September 12, 2022

– AgileBins v1.0.4 released. September 10, 2022

Instructions

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

HTML structure​

<div class="domo-slides"> <!-- 此为父层，添加调用时需要用到此处的class名 -->
  <div class="conts"> <!-- 此为mainEl内容列表容器层，添加mainEl调用时需要用到此处的class名 -->
     <ul>
       <li><img src="https://www.oschina.net/p/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 styles

<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>

JS calling code

<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>