今天学习了下  用javascript面向对象编程写轮播效果 上篇文章也是用javascript写轮播效果 但是感觉上代码很乱 所以今天也学习了下用面向对象编程写轮播效果！通用的写法是 先定义一个类 也就是构造函数！function Player(){},这样一个构造函数！定于相应的属性保存在此构造函数内，调用的方式是new Player()这样调用，但是我们都知道 每当实例化一个对象时候 那么有相对应的一个指针指向了一个prototype，构造函数和prototype没有任何关系 只有对象的实例一个指针指向了prototype！所以我们可以把所有的方法都保存在prototype中 ，有start（）轮播方法 ，Stop（）停止方法，invoke（）切换相应的位置的方法 但是这两个方法我们可以放在构造函数里面写 初始化下！你暂时这么多方法，构造函数参数有：hoverClass，lists,scrollImg,outTime,p_w_picpathHeight 等！下面的代码：

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style> 
  7. ul,li{ list-style:none;} 
  8. .scrollImg{ width:400px; height:900px; position:absolute; top:0; left:0;} 
  9. .scrollImg a{ width:400px; height:300px; overflow:hidden; display:block;} 
  10. .scrollImg img{ border:none;} 
  11. .ScrollWrap{ width:400px; height:300px; overflow:hidden;margin:50px auto 0; position:relative;} 
  12. .lists{ height:20px; position:absolute; top:255px; right:10px; z-index:100;*top:270px;} 
  13. .lists li{ width:20px; height:20px; border:1px solid orange; background:#fff; float:left; margin-right:4px; display:inline; text-align:center; line-height:20px; color:orange; cursor:pointer; font-weight:700;} 
  14. .lists li.current{ height:24px; line-height:24px; background:orange; color:#fff; width:24px; margin-top:-2px;} 
  15. </style> 
  16. <script src="base.js" type="text/javascript"></script> 
  17. </head> 
  18.  
  19. <body> 
  20.     <div class="ScrollWrap"> 
  21.         <div class="scrollImg"> 
  22.             <a href="#"><img  src="p_w_picpath/01.jpg" width="400" height="300"/></a> 
  23.             <a href="#"><img  src="p_w_picpath/02.jpg" width="400" height="300"/></a> 
  24.             <a href="#"><img  src="p_w_picpath/03.jpg" width="400" height="300"/></a> 
  25.         </div> 
  26.         <ul class="lists"> 
  27.             <li>1</li> 
  28.             <li>2</li> 
  29.             <li>3</li> 
  30.         </ul> 
  31.     </div> 
  32. <script type="text/javascript" src="object.js"></script> 
  33. <script> 
  34.    var lists = getElementsByClassName("lists")[0].getElementsByTagName("li"), 
  35.        scrollImg = getElementsByClassName("scrollImg")[0]; 
  36.    var s = new Player(lists,scrollImg,undefined,3000,300); 
  37.    s.Start(); 
  38.    //s.invoke(1); 
  39. </script> 
  40. </body> 
  41. </html> 
 
  
 
 
  
 
  
  1. function getElementsByClassName(className,context){ 
  2.         context = context || document; 
  3.         if(context.getElementsByClassName){ 
  4.             return context.getElementsByClassName(className);    
  5.         } 
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点 
  7.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点 
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]); 
  9.         }    
  10.         return ret; 
  11.     } 
  12.      
  13. //检查有没有类 
  14. function hasClass(node,className){ 
  15.     var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开    
  16.     //遍历这个类名 
  17.     for(var i=0;i<names.length;i++){ 
  18.         if(names[i]==className) 
  19.             return true;     
  20.         } 
  21.         return false;    
  22.     } 
  23.          
  24. /** 
  25. 参数说明 
  26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0 
  27. start : 开始值 
  28. dur : 动画持续多长时间 
  29. alter : 总的变化量 
  30. */ 
  31. function animate(o,start,alter,dur,fx){ 
  32.     var curTime=0; 
  33.     var t = setInterval(function(){ 
  34.         if(curTime>=dur) clearInterval(t); 
  35.         for(var i in start){ 
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   
  37.         } 
  38.         curTime+=50; 
  39.     },50)    
  40.     return function(){ 
  41.         clearInterval(t);    
  42.     }; 
  43. } 
  44.  
  45. function Linear(start,alter,curTime,dur){ 
  46.     return start + curTime/dur * alter;  
  47.     //最简单的线性变化 即匀速运动     
  48. } 
  49. //加速运动 
  50. function Quad(start,alter,curTime,dur){ 
  51.     return start + Math.pow(curTime/dur,2)*alter;    
  52. } 
 
  
 
 
  
 
  
  1. // JavaScript Document 
  2.  
  3. /**  
  4. 面向对象封装轮播器 
  5. lists 轮播按钮 
  6. scrollImg 要轮播的内容 
  7. hoverClass  鼠标类 默认情况下是current 
  8. outTime 轮播间隔 
  9. p_w_picpathHeight 要轮播的图片高度 
  10. */ 
  11.  
  12. function Player(lists,scrollImg,hoverClass,outTime,p_w_picpathHeight){ 
  13.     hoverClass = hoverClass || "current"; 
  14.     outTime = outTime || 3000; 
  15.     this.lists = lists; 
  16.     this.scrollImg = scrollImg; 
  17.     this.hoverClass = hoverClass; 
  18.     this.outTime = outTime; 
  19.     this.p_w_picpathHeight = p_w_picpathHeight; 
  20.     this.curItem =lists[0];  //初始化当前帧 
  21.     //this.curItem.index = 0;  //初始化当前帧的值 
  22.     this.invoke(0); 
  23.     var _this = this; 
  24.     for(var i=0;i<this.lists.length;i++){ 
  25.         this.lists[i].onmouseover = function(){ 
  26.             _this.Stop(); 
  27.             _this.invoke(this.index); 
  28.         }; 
  29.         this.lists[i].onmouseout = function(){ 
  30.             _this.Start(); 
  31.         }; 
  32.         this.lists[i].index = i; 
  33.     } 
  34. } 
  35. /* start是开始播放函数 stop是结束函数 invoke是切换到哪里的函数 */ 
  36. Player.prototype = { 
  37.     Start : function(){ 
  38.         var _this = this; 
  39.         this.Stop(); 
  40.         this.interval = setInterval(function(){ 
  41.             _this.next();    
  42.         },this.outTime); 
  43.     }, 
  44.     invoke : function(n){ 
  45.         //具体显示那一帧 
  46.         this.curItem = this.lists[n]; 
  47.         //this.curItem.index = n; 
  48.         var top = parseInt(this.scrollImg.style.top) || 0; 
  49.         this.animateInterval && this.animateInterval(); 
  50.         this.animateInterval = animate(this.scrollImg,{top:top},{top:(-n*this.p_w_picpathHeight)-top},500,Quad); 
  51.         //this.scrollImg.style.top = -n*300 + "px"; 
  52.         this.recovery(); 
  53.         this.curItem.className = this.hoverClass; 
  54.          
  55.     }, 
  56.     Stop : function(){ 
  57.         clearInterval(this.interval); 
  58.     }, 
  59.     next : function(){ 
  60.         //这个函数是说明是下一帧 那么我们应该求出当前针. 
  61.         var nextIndex = this.curItem.index + 1; 
  62.         if(nextIndex >= this.lists.length){ 
  63.             nextIndex = 0;   
  64.         }    
  65.         this.invoke(nextIndex); 
  66.     }, 
  67.     recovery : function(){ 
  68.         for(var i=0;i<this.lists.length;i++){ 
  69.             this.lists[i].className = "";    
  70.         }    
  71.     }    
  72. } 
 
  
代码有相应的注释 恩下面也有相应的下载 不明白的地方可以留言