JavaScript实现图片轮播(未测试)

来源：互联网发布：淘宝人最多的时段编辑：程序博客网时间：2024/06/05 15:59
test2.html

<!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>
0 0