昨天我和同事聊天谈到  叫我不要什么效果用js用面向对象编程 但是我个人认为 用js面向对象编程 有以下几个好处：一：  代码冗余量低   二： 维护性高   三： 代码量精简 相对来说 提高性能  四：不依赖于HTMl结构中的类名或者ID 当页面中的类改时候 面向对象的js根本就不需要任何改动 只是传个参数进来而已  等等 恩 既然同事说 不要什么用面向对象的方式来写的话 今天我就用面向过程来编程下 今天也简单的写了一个 图片自动轮番效果 其实这个就是和tab切换的原理是一模一样的 也蛮简单的 写了很多js 发现自己的js有了很大的提高 现在自己也可以手写代码 也不是依赖已什么框架 现在基本上能手写代码了 用原审js 但是当在写一点效果时候 如果碰到复杂的动画时候 可能就希望要用到jquery或者kissy框架了 这个用原审js就不好写了！废话小说 ： 代码如下：

先还是一些基本的base方法：

 

 
   
     
    
  1. function getElementsByClassName(className,context){ 
    2.  
    
  2.         context = context || document; 
    3.  
    
  3.         if(context.getElementsByClassName){ 
    4.  
    
  4.             return context.getElementsByClassName(className);    
    5.  
    
  5.         } 
    6.  
    
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点 
    7.  
    
  7.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点 
    8.  
    
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]); 
    9.  
    
  9.         }    
    10.  
    
  10.         return ret; 
    11.  
    
  11.     } 
    12.  
    
  12.      
    13.  
    
  13. //检查有没有类 
    14.  
    
  14. function hasClass(node,className){ 
    15.  
    
  15.     var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开    
    16.  
    
  16.     //遍历这个类名 
    17.  
    
  17.     for(var i=0;i<names.length;i++){ 
    18.  
    
  18.         if(names[i]==className) 
    19.  
    
  19.             return true;     
    20.  
    
  20.         } 
    21.  
    
  21.         return false;    
    22.  
    
  22.     } 
    23.  
    
  23.          
    24.  
    
  24. /** 
    25.  
    
  25. 参数说明 
    26.  
    
  26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0 
    27.  
    
  27. start : 开始值 
    28.  
    
  28. dur : 动画持续多长时间 
    29.  
    
  29. alter : 总的变化量 
    30.  
    
  30. */ 
    31.  
    
  31. function animate(o,start,alter,dur,fx){ 
    32.  
    
  32.     var curTime=0; 
    33.  
    
  33.     var t = setInterval(function(){ 
    34.  
    
  34.         if(curTime>=dur) clearInterval(t); 
    35.  
    
  35.         for(var i in start){ 
    36.  
    
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   
    37.  
    
  37.         } 
    38.  
    
  38.         curTime+=50; 
    39.  
    
  39.     },50)    
    40.  
    
  40.     return function(){ 
    41.  
    
  41.         clearInterval(t);    
    42.  
    
  42.     }; 
    43.  
    
  43. } 
    44.  
    
  44.  
    45.  
    
  45. function Linear(start,alter,curTime,dur){ 
    46.  
    
  46.     return start + curTime/dur * alter;  
    47.  
    
  47.     //最简单的线性变化 即匀速运动     
    48.  
    
  48. } 
    49.  
    
  49. //加速运动 
    50.  
    
  50. function Quad(start,alter,curTime,dur){ 
    51.  
    
  51.     return start + Math.pow(curTime/dur,2)*alter;    
    52.  
    
  52. } 
    53.  
    
  53.  function addClass(obj,className){   
    54.  
    
  54.      obj.className+=" " +className;     
    55.  
    
  55.      return obj;   
    56.  
    
  56. } 
    57.  
    
  57. function delClass(obj,className){   
    58.  
    
  58.     var s = obj.className.split(/\s+/);//正则把类名分开   
    59.  
    
  59.     for(var i=0;i<s.length;i++){   
    60.  
    
  60.     if(s[i]==className){   
    61.  
    
  61.     delete s[i];       
    62.  
    
  62.     }      
    63.  
    
  63.     }   
    64.  
    
  64.     obj.className = s.join(" ");   
    65.  
    
  65.     return obj;   
    66.  
    
  66. }  
    67.  
    
  67. function addEvent(obj,type,fn,status){ 
    68.  
    
  68.     if(obj.addEventListener){ 
    69.  
    
  69.         obj.addEventListener(type,fn,false); 
    70.  
    
  70.     }else{ 
    71.  
    
  71.         obj.attachEvent("on"+type,function(){ 
    72.  
    
  72.             fn.call(obj); 
    73.  
    
  73.         }) 
    74.  
    
  74.     } 
    75.  
    
  75. } 
    76.  
   
 
   
页面的代码如下：
 
   
 
 
   
 
   
     
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
    
  3. <head> 
    4.  
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
    
  5. <title>无标题文档</title> 
    6.  
    
  6. <style> 
    7.  
    
  7. div,ul,li{ list-style:none; margin:0; padding:0;} 
    8.  
    
  8. img{ border:none;} 
    9.  
    
  9. .slider{ width:634px; height:230px; overflow:hidden; margin:50px auto 0; position:relative;} 
    10.  
    
  10. .imgMarquee{ position:absolute; left:0; top:0; z-index:10;} 
    11.  
    
  11. </style> 
    12.  
    
  12. <script src="base.js"></script> 
    13.  
    
  13. </head> 
    14.  
    
  14.  
    15.  
    
  15. <body> 
    16.  
    
  16.     <div class="slider" id="slider"> 
    17.  
    
  17.         <div class="imgMarquee"> 
    18.  
    
  18.             <img  src="01.jpg" width="630" height="230" class="timg"/> 
    19.  
    
  19.             <img  src="02.jpg" width="634" height="230" class="timg"/> 
    20.  
    
  20.             <img  src="03.gif" width="634" height="230" class="timg"/> 
    21.  
    
  21.         </div> 
    22.  
    
  22.     </div> 
    23.  
    
  23. <script type="text/javascript"> 
    24.  
    
  24.     var slider = document.getElementById("slider"); 
    25.  
    
  25.     var imgMarquee = getElementsByClassName("timg"); 
    26.  
    
  26.     var currentIndex = 0; 
    27.  
    
  27.     var t; 
    28.  
    
  28.     t = setInterval(function(){ 
    29.  
    
  29.         Start();     
    30.  
    
  30.     },3000) 
    31.  
    
  31.     function Start(){ 
    32.  
    
  32.         if(currentIndex >= imgMarquee.length){ 
    33.  
    
  33.             currentIndex = 0;    
    34.  
    
  34.         } 
    35.  
    
  35.         showItem(currentIndex); 
    36.  
    
  36.         currentIndex++;      
    37.  
    
  37.     } 
    38.  
    
  38.     function showItem(n){ 
    39.  
    
  39.         for(var i=0;i<imgMarquee.length;i++){ 
    40.  
    
  40.             imgMarquee[i].style.display = "none";    
    41.  
    
  41.         } 
    42.  
    
  42.         imgMarquee[n].style.display = "block";   
    43.  
    
  43.     } 
    44.  
    
  44.     slider.onmouseover = function(){ 
    45.  
    
  45.         clearInterval(t);    
    46.  
    
  46.     } 
    47.  
    
  47.     slider.onmouseout = function(){ 
    48.  
    
  48.         t = setInterval(function(){ 
    49.  
    
  49.             Start();     
    50.  
    
  50.         },3000)  
    51.  
    
  51.     } 
    52.  
    
  52. </script> 
    53.  
    
  53. </body> 
    54.  
    
  54. </html> 
    55.