JavaScript图片轮播代码分享

为大家分享的JavaScript图片轮播代码如下
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .img-div img{display:none;} </style></head> <body> <div class="slide" id="slide"><div class="img-div"> <img src="model.jpg" /> <img src="model2.jpg" /> <img src="model.jpg" /> <img src="model2.jpg" /> <img src="model.jpg" /></div> <div class="slide-btn"><a href="#" class="hover">1</a><a href="#" class="hover">2</a><a href="#" class="hover">3</a><a href="#" class="hover">4</a><a href="#" class="hover">5</a></div> </div> <script type="text/javascript">var zBase={ $id:function（id）{return document.getElementById（id）;}, $tagName:function（tagName,obj）{return （（obj?obj:document）.getElementsByTagName（tagName））;}, $c:function（clsN,obj） {var tag=this.$tagName（"*"）,reg=new RegExp（"（^|\s）"+clsN+"（\s|$）"）,arr=[]; for（var i=0;i<tag.length;i++）{ if（reg.test（tag[i].className）） {arr.push（tag[i]）;} }return arr;}, $add:function（obj,clsN） {var reg=new RegExp（"（^|\s）"+clsN+"（\s|$）"）; if（！reg.test（obj.className））{ obj.className+=" "+clsN; }}, $remove:function（obj,clsN） {var cla=obj.className;var reg="/|\s*"+clsN+"\b/g";obj.className=cla?cla.replace（eval（reg）,""）:"";}, css:function（obj,attr,value） {if（value）{ obj.style[attr]=value; } else{ return typeof window.getComputedStyle！="undefined"?window.getComputedStyle（obj,null）[attr]:obj.currentStyle[attr]; } }, easing:{ liner:function（t,b,c,d）{return c*t/d+b}, easeOut:function（t,b,c,d）{return -c*（（t=t/d-1）*t*t*t-1）+b}}, config:{ index:0, auto:true, direct:"left" }, init:function（）{ this.slide=this.$id（"slide"）; this.img_div=this.$c（"img-div"）[0]; this.slide_btn=this.$tagName（"a",this.$c（"slide-btn"）[0]）; this.img_arr=this.$tagName（"img",this.img_div）;if（this.config.auto）{this.play（）;} this.hover（）; }, animate:function（obj,attr,val）{ var d=1000; if（obj[attr+"timer"]）{clearInterval（obj[attr+"timer"]）}; var start= parseInt（zBase.css（obj,attr））; var space=val-start,st=（new Date（）.getTime（））,m=space>0?"cell":"floor"; obj[attr+"timer"]=setInterval（function（）{var t=（new Date（）.getTime（）-st）;if（t<d）{zBase.css（obj,attr,Math[m]（zBase.easing["easeOut"]（t,start,space,d））+"px"）;}else{ clearInterval（obj[attr+"timer"]）; zBase.css（obj,attr,top+space+"px"）;}},20）;}, hover:function（） {for（var i=0;i<this.slide_btn.length;i++）{ this.slide_btn[i].index=i; this.slide_btn[i].onmouseover=function（） {if（zBase.slide.timer）{ clearInterval（zBase.slide.timer）; }zBase.config.index=this.index;//console.log（this.slide_btn）; for（var j=0;j<zBase.slide_btn.length;j++）{ zBase.$remove（zBase.slide_btn[j],"hover"）; } zBase.$add（zBase.slide_btn[zBase.config.index],"hover"）;zBase.animate（zBase.img_div,zBase.config.direct,-zBase.config.index*1000）;} this.slide_btn[i].onmouseout=function（） {zBase.play（）;}} }, play:function（）{this.slide.timer = setInterval（function（）{ var tags=zBase.$tagName（"img",this.img_div）; //zBase.$tagName（"img",this.img_div）[zBase.config.index].style.display="block"; for（var i =0;i<tags.length;i++） { if（zBase.config.index==i） {zBase.$tagName（"img",this.img_div）[zBase.config.index].style.display="block"; }else {zBase.$tagName（"img",this.img_div）[i].style.display="none";} }zBase.config.index++; if（zBase.config.index>=zBase.img_arr.length） zBase.config.index=0; zBase.animate（zBase.img_div,zBase.config.direct,-zBase.config.index*500）; for（var j=0;j<zBase.slide_btn.length;j++）{zBase.$remove（zBase.slide_btn[j],"hover"） ; } zBase.$add（zBase.slide_btn[zBase.config.index],"hover"）;},3000） }} zBase.init（）;</script></body></html>
以上就是为大家分享的JavaScript图片轮播代码，希望大家可以喜欢。