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 id="slide" 

 div 

 img src="model.jpg" / 

 img src="model2.jpg" / 

 img src="model.jpg" / 

 img src="model2.jpg" / 

 img src="model.jpg" / 

 /div 

 div 

 a href="#" 1 /a 

 a href="#" 2 /a 

 a href="#" 3 /a 

 a href="#" 4 /a 

 a href="#" 5 /a 

 /div 

 /div 

 script type="text/javascript" 


 $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); 


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


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


 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)