agilebis.js是一款基于jquery运行的免费开源特效插件。快速解决网页大部分特效。使用简单维护方便，无需懂得js代码编写。轻松制作，导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动，选项卡内容切换、手风琴折叠效果等。兼容IE6+SafariOperaFirefoxChrome等大部分浏览器。
版本更新：
-优化v1.0.4无缝隙滚动(marquee)内容自适应。2022年9月17日
-v1.0.4新增实例化Api接口（slide(i:第个):轮播图滑动触发、mPrev():轮播图上一个触发、mNext():轮播图下一个触发、scroll(page:第页):多图滚动触发、sPrev():多图滚动上一页触发、sNext():多图滚动下一页触发），实例化参数（el:实例化对象容器），细节调优。2022年9月12日
-AgileBisv1.0.4发布。2022年9月10日
使用方法
<scripttype="text/javascript"src="jquery.mi.js"></script><!--必须存在1--><scripttype="text/javascript"src="jquery.agilebis-v1.0.4.mi.js"></script><!--必须存在2-->HTML结构
<divclass="domo-slides"><!--此为父层，添加调用时需要用到此处的class名--><divclass="cots"><!--此为maiEl内容列表容器层，添加maiEl调用时需要用到此处的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><!--此为maiState导航列表容器层，调用时需用到此class名--></div>CSS样式
<styletype="text/css">*{margi:0;paddig:0;}body{backgroud:#fff;fot-size:12px;}ul,li{list-style:oe;}p{word-wrap:break-word;}img{border:0;vertical-alig:middle;}a{color:#333;text-decoratio:oe;}a:hover{color:#1974A1;text-decoratio:oe;}/*domo-slides为此例子父层class名*/.domo-slides{width:480px;height:260px;zoom:1;margi:260pxautoautoauto;positio:relative;overflow:hidde;}/*cots为此例子maiEl内容列表容器层class名*/.domo-slides.cots{width:480px;height:260px;border-radius:8px;overflow:hidde;}.domo-slides.cotsli{width:480px;height:260px;text-alig:ceter;overflow:hidde;}/*tabs为此例子maiState导航列表容器层class名*/.domo-slides.tabs{width:480px;height:11px;lie-height:11px;positio:absolute;z-idex:1;left:0;bottom:30px;overflow:hidde;}.domo-slides.tabsul{text-alig:ceter;height:11px;}.domo-slides.tabsulli{lie-height:999px;width:11px;height:11px;border-radius:11px;margi:05px;backgroud:#b2d5ed;cursor:poiter;display:ilie-block;*display:ilie;zoom:1;overflow:hidde;}/*此处lie-height:999px;设为lie-height:11px;分页会显示数字出来*/.domo-slides.tabsulli.curret{backgroud:#4ad585;}</style>JS调用代码
<scripttype="text/javascript">$(".domo-slides").agilebis({autoPlay:true,/*自动播放(true|false)*/delayTime:3000,/*自动播放延迟时间(毫秒)，注意：delayTime>=speed>=0*/loop:true,/*无限循环播放(true|false)*/maiEl:".cotsul",/*内容列表容器*/maiState:".tabsul",/*导航列表容器（当前为圆圈，此lie-height:设为你的圆圈高度;可显示出数字分页）*/autoMaiState:true,/*是否开启自动填充导航HTML元素。与maiState配合使用。*/oClass:"curret",/*当前选中的索引亮高css样式名*/effect:"left",/*效果类型:fade|fold|slideDow|top|right|bottom|left*/});</script>
评论