js轮播效果 对于我们来说并不陌生，但是以前是用Jquery框架写的 但是用框架并不是非常可靠！因为有的公司限制了框架 所以来说用javascript来封装函数和方法是最可靠的 也正是其中之一使我更加想学习javascript原理 其二 我以前到很多大型公司面试时候 都会问你会js吗 我说会用jquery 他们又问你研究过jquery源代码吗？我回答说肯定没有研究过啊 所以这样也会降低面试率！因为我曾经打过看 但是都是用原审js封装看不太懂 也就没有兴趣看！第三 我也考虑过 框架很多 但是最重要不是说怎么样用框架 而是我们更要知道他们是怎么封装的 怎么写的！更要我们学会封装方法 封装库！最近有的同事也在旁边笑下我 kissy代码你知道什么意思吗 我说不知道 我只知道这样用下 他们就在旁边笑我 那我就让他们笑吧！说真的 一般情况下我都会用jquery框架 但是淘宝有时限制用jquery框架 只能用原审js和kissy kissy说真的我没有用过及认真看过！最主要不是我不看 是因为最近很忙 工作时间忙于工作 下班后又更多想了解javascript原理 所以也是经常看javascript书 所以就这样 kissy先暂时放下！他们想怎么取笑我就让他们笑吧！恩 废话就不多说 现在时间也不早了 现在来分享下 今天学习的 写的javascript轮播效果！当然今天的轮播没有把他们封装起来 恩大概元旦左右我想用javascript面向对象的方式来把他们封装起来！现在来谈谈我这个轮播！这个轮播就是和淘宝首页一样的效果！

 

一：我这个轮播是不断的向上滚动！那么现在我们首先要明白的事件 该怎么写结构及样式！我这边用的是ul li 然后里面有1 2 3 数字！然后img怎么写结构呢！我这里先定了两个div套住img 那么里面的div让他宽度就和这个图片的宽度一样 那么高度就是这三张图片的总和！那么外层也有一个div 那么外层宽度和高度就是和一张图片的宽度和高度一样 然后用overflow:hidden 这样就是页面显示的一样！然后我们可以通过不断的改变内层的div的top值就可以实现滚动！那么要改变top值 我们首先要给该div的一个绝对定位或者相对定位！为什么要给个绝对定位或者相对定位！因为我们都知道 我想让这个图片滚动起来 那么这个图片肯定不能在该文档中 如果不用定位在文档中 怎么样能滚动起来？因为我们也知道用了定位方式 就是脱离了文档流 也就是不受当前的文档控制 这个现在不用多说，我相信你们都懂得！

二 我这里用了上篇文章中获取类名方法也搞了过来！用了一个动画函数 封装动画 然后把引用过来就ok了 这个动画函数有两个方法 一个是匀速运动的方法 还有一个简单的线性运动方法 当然网上还有很多 变速运动的方法 有兴趣的可以到网上研究下！当然和数学和物理有关！js写起来也是蛮简单的！可能就是那个动画函数不是非常能理解 其他的函数应该是没有什么的 我相信你们都懂！说真的这个动画函数我也是一知半解 网上有很多这样的函数方法 有兴趣可以研究下 稍后我也会研究下这个原理的！

下面是页面代码：

 


    
    
    

     
     
  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. ul,li{ list-style:none;}  
    8. 

     
     
  8. .scrollImg{ width:400px; height:900px; position:absolute; top:0; left:0;}  
    9. 

     
     
  9. .scrollImg a{ width:400px; height:300px; overflow:hidden; display:block;}  
    10. 

     
     
  10. .scrollImg img{ border:none;}  
    11. 

     
     
  11. .ScrollWrap{ width:400px; height:300px; overflow:hidden;margin:50px auto 0; position:relative;}  
    12. 

     
     
  12. .lists{ height:20px; position:absolute; top:255px; right:10px; z-index:100;*top:270px;}  
    13. 

     
     
  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. 

     
     
  14. .lists li.current{ height:24px; line-height:24px; background:orange; color:#fff; width:24px; margin-top:-2px;}  
    15. 

     
     
  15. </style> 
    16. 

     
     
  16. <script src="base.js" type="text/javascript"></script> 
    17. 

     
     
  17. </head> 
    18. 

     
     
  18.  
    19. 

     
     
  19. <body> 
    20. 

     
     
  20.     <div class="ScrollWrap"> 
    21. 

     
     
  21.         <div class="scrollImg"> 
    22. 

     
     
  22.             <a href="#"><img  src="image/01.jpg" width="400" height="300"/></a> 
    23. 

     
     
  23.             <a href="#"><img  src="image/02.jpg" width="400" height="300"/></a> 
    24. 

     
     
  24.             <a href="#"><img  src="image/03.jpg" width="400" height="300"/></a> 
    25. 

     
     
  25.         </div> 
    26. 

     
     
  26.         <ul class="lists"> 
    27. 

     
     
  27.             <li>1</li> 
    28. 

     
     
  28.             <li>2</li> 
    29. 

     
     
  29.             <li>3</li> 
    30. 

     
     
  30.         </ul> 
    31. 

     
     
  31.     </div> 
    32. 

     
     
  32.    
    33. 

     
     
  33.  <script type="text/javascript"> 
    34. 

     
     
  34.     var UL = getElementsByClassName("lists")[0],  
    35. 

     
     
  35.         LI = UL.getElementsByTagName("li");  
    36. 

     
     
  36.     var cur = LI[0];//保存当前的li 默认情况下是从第一个开始  
    37. 

     
     
  37.     var scrollImg = getElementsByClassName("scrollImg")[0],t;  
    38. 

     
     
  38.         for(var i=0;i<LI.length;i++){  
    39. 

     
     
  39.             (function(i){  
    40. 

     
     
  40.                 LI[i].onmouseover = function(){  
    41. 

     
     
  41.                     clearInterval(t);  
    42. 

     
     
  42.                     //scrollImg.style.top = (-i*300) + "px";  
    43. 

     
     
  43.                     var top = parseInt(scrollImg.style.top) || 0;  
    44. 

     
     
  44.                     animate(scrollImg,{top:top},{top:(-i*300)-top},400,Quad);  
    45. 

     
     
  45.                     for(var j=0;j<LI.length;j++){  
    46. 

     
     
  46.                         LI[j].className = "";     
    47. 

     
     
  47.                     }  
    48. 

     
     
  48.                     this.className = "current";  
    49. 

     
     
  49.                     cur = this; //保存当前移动的LI[i] 第几个  
    50. 

     
     
  50.                 }  
    51. 

     
     
  51.                 LI[i].index = i; // 保存当前的索引  
    52. 

     
     
  52.                 LI[i].onmouseout = function(){  
    53. 

     
     
  53.                     t = setInterval(fn,3000);     
    54. 

     
     
  54.                 }  
    55. 

     
     
  55.             })(i)  
    56. 

     
     
  56.         }  
    57. 

     
     
  57.         scrollImg.onmouseover = function(){  
    58. 

     
     
  58.             clearInterval(t);     
    59. 

     
     
  59.         }  
    60. 

     
     
  60.         scrollImg.onmouseout = function(){  
    61. 

     
     
  61.             t = setInterval(fn,3000);     
    62. 

     
     
  62.         }  
    63. 

     
     
  63.         LI[0].  
    64. 

     
     
  64.         t = setInterval(fn,3000);  
    65. 

     
     
  65.         function fn(){  
    66. 

     
     
  66.             var nextIndex = cur.index+1;  
    67. 

     
     
  67.             if(nextIndex>=LI.length){  
    68. 

     
     
  68.                 nextIndex=0;      
    69. 

     
     
  69.             }     
    70. 

     
     
  70.             LI[nextIndex].  
    71. 

     
     
  71.             t = setInterval(fn,3000);  
    72. 

     
     
  72.         }  
    73. 

     
     
  73.  </script> 
    74. 

     
     
  74. </body> 
    75. 

     
     
  75. </html> 
    76.

base里面的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) clearTimeout(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. }  
    41. 

     
     
  41.  
    42. 

     
     
  42. function Linear(start,alter,curTime,dur){  
    43. 

     
     
  43.     return start + curTime/dur * alter;   
    44. 

     
     
  44.     //最简单的线性变化 即匀速运动      
    45. 

     
     
  45. }  
    46. 

     
     
  46. function Quad(start,alter,curTime,dur){  
    47. 

     
     
  47.     return start + Math.pow(curTime/dur,2)*alter;     
    48. 

     
     
  48. } 
    49.

代码以上都是 就可以实现了 上面这一块用了一个闭包函！

 

 

for循环里面用了一个闭包 就是解决传i参数值 如果不用的话 那么i始终会是一个值 并且该值是3！而不是我们想想中的 0 1 2这样的！最后用了个setInterval这个函数来调用自动滚动效果！下面给了个源代码包下载 可以下载看源代码 如果用不明白的地方可以给我留言！一起学习！