javascript写真は自動的に順番に回っています.

18069 ワード
JavaScript 職場 レジャー
昨日同僚と話をしました.  何の効果もいらないです.jsを使って対象に向かってプログラミングしますが、個人的にはjsを使って対象に向かってプログラミングすると以下のような利点があります.  コード冗長量が低い  二:メンテナンス性が高い  コード量の簡素化は相対的に性能を向上させる.  四:HTMl構造のクラス名またはIDに依存しないで、ページの中のクラスが変わると対象に向かうjsはまったく何の変更も必要ないです.ただパラメータを伝達して入るだけです.  同僚が何も要らないと言っていますが、対象に向かって書くなら、今日はプロセスに向かってプログラミングします.今日も簡単に写真を書きました.自動轮番効果はこれはtabと同じ原理です.今は基本的にコードを手書きで書くことができますが、効果を少し書いても複雑な動画が出たらjqueryやkisyのフレームを使いたいです.これは原審jsでは書きにくいです.ナンセンス小説:コードは以下の通りです.
まずは基本的なベースの方法です.
  

  
  
  
  
    
   
   
   
   
  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.
LeetCode:160.交差連鎖表(JavaScript)