agilebins.js是一款基于jquery运行的免费开源特效插件。快速解决网页大部分特效。使用简单维护方便，无需懂得js代码编写。轻松制作，导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动，选项卡内容切换、手风琴折叠效果等。兼容IE6+SafariOperaFirefoxChrome等大部分浏览器。
版本更新：
-优化v1.0.4无缝隙滚动(marquee)内容自适应。2022年9月17日
-v1.0.4新增实例化Api接口（slide(i:第n个):轮播图滑动触发、mPrev():轮播图上一个触发、mNext():轮播图下一个触发、scroll(page:第n页):多图滚动触发、sPrev():多图滚动上一页触发、sNext():多图滚动下一页触发），实例化参数（el:实例化对象容器），细节调优。2022年9月12日
-AgileBinsv1.0.4发布。2022年9月10日
使用方法
<scripttype="text/javascript"src="jquery.min.js"></script><!--必须存在1--><scripttype="text/javascript"src="jquery.agilebins-v1.0.4.min.js"></script><!--必须存在2-->HTML结构
<divclass="domo-slides"><!--此为父层，添加调用时需要用到此处的class名--><divclass="conts"><!--此为mainEl内容列表容器层，添加mainEl调用时需要用到此处的class名--><ul><li><imgsrc="images/pic1.jpg"width="480"height="260"/></li><li><imgsrc="images/pic2.jpg"width="480"height="260"/></li><li><imgsrc="images/pic3.jpg"width="480"height="260"/></li></ul></div><divclass="tabs"><ul></ul></div><!--此为mainState导航列表容器层，调用时需用到此class名--></div>CSS样式
<styletype="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:260pxautoautoauto;position:relative;overflow:hidden;}/*conts为此例子mainEl内容列表容器层class名*/.domo-slides.conts{width:480px;height:260px;border-radius:8px;overflow:hidden;}.domo-slides.contsli{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.tabsul{text-align:center;height:11px;}.domo-slides.tabsulli{line-height:999px;width:11px;height:11px;border-radius:11px;margin:05px;background:#b2d5ed;cursor:pointer;display:inline-block;*display:inline;zoom:1;overflow:hidden;}/*此处line-height:999px;设为line-height:11px;分页会显示数字出来*/.domo-slides.tabsulli.current{background:#4ad585;}</style>JS调用代码
<scripttype="text/javascript">$(".domo-slides").agilebins({autoPlay:true,/*自动播放(true|false)*/delayTime:3000,/*自动播放延迟时间(毫秒)，注意：delayTime>=speed>=0*/loop:true,/*无限循环播放(true|false)*/mainEl:".contsul",/*内容列表容器*/mainState:".tabsul",/*导航列表容器（当前为圆圈，此line-height:设为你的圆圈高度;可显示出数字分页）*/autoMainState:true,/*是否开启自动填充导航HTML元素。与mainState配合使用。*/onClass:"current",/*当前选中的索引亮高css样式名*/effect:"left",/*效果类型:fade|fold|slideDown|top|right|bottom|left*/});</script>
评论