在上篇轮播（方向上下轮播）后 感觉左右轮播也可以实现 稍微改造下就可以了 现在已经改造好了 ！ 也可以实现：代码如下：

 

 
   
     
    
  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:1200px; height:300; position:absolute; top:0; left:0;} 
    9.  
    
  9. .scrollImg a{ width:400px; height:300px; overflow:hidden; display:block; float:left;} 
    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.  <script type="text/javascript" src="object.js"></script> 
    33.  
    
  33.  <script> 
    34.  
    
  34.    var lists = getElementsByClassName("lists")[0].getElementsByTagName("li"), 
    35.  
    
  35.        scrollImg = getElementsByClassName("scrollImg")[0]; 
    36.  
    
  36.    var s = new Player(lists,scrollImg,undefined,3000,400); 
    37.  
    
  37.    //s.Start(); 
    38.  
    
  38.    //s.invoke(1); 
    39.  
    
  39. </script> 
    40.  
    
  40. </body> 
    41.  
    
  41. </html> 
    42.  
   
 
   
 
 
   
 
   
     
    
  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.  
   
 
   
 
 
   
 
   
     
    
  1. // JavaScript Document 
    2.  
    
  2.  
    3.  
    
  3. /**  
    4.  
    
  4. 面向对象封装轮播器 
    5.  
    
  5. lists 轮播按钮 
    6.  
    
  6. scrollImg 要轮播的内容 
    7.  
    
  7. hoverClass  鼠标类 
    8.  
    
  8. outTime 轮播间隔 
    9.  
    
  9. */ 
    10.  
    
  10.  
    11.  
    
  11. function Player(lists,scrollImg,hoverClass,outTime,imageWidth){ 
    12.  
    
  12.     hoverClass = hoverClass || "current"; 
    13.  
    
  13.     outTime = outTime || 3000; 
    14.  
    
  14.     this.lists = lists; 
    15.  
    
  15.     this.scrollImg = scrollImg; 
    16.  
    
  16.     this.hoverClass = hoverClass; 
    17.  
    
  17.     this.outTime = outTime; 
    18.  
    
  18.     this.imageWidth = imageWidth; 
    19.  
    
  19.     this.curItem =lists[0];  //初始化当前帧 
    20.  
    
  20.     //this.curItem.index = 0;  //初始化当前帧的值 
    21.  
    
  21.     this.invoke(0); 
    22.  
    
  22.     var _this = this; 
    23.  
    
  23.     for(var i=0;i<this.lists.length;i++){ 
    24.  
    
  24.         this.lists[i].onmouseover = function(){ 
    25.  
    
  25.             _this.Stop(); 
    26.  
    
  26.             _this.invoke(this.index); 
    27.  
    
  27.         }; 
    28.  
    
  28.         this.lists[i].onmouseout = function(){ 
    29.  
    
  29.             _this.Start(); 
    30.  
    
  30.         }; 
    31.  
    
  31.         this.lists[i].index = i; 
    32.  
    
  32.     } 
    33.  
    
  33. } 
    34.  
    
  34. /* start是开始播放函数 stop是结束函数 invoke是切换到哪里的函数 */ 
    35.  
    
  35. Player.prototype = { 
    36.  
    
  36.     Start : function(){ 
    37.  
    
  37.         var _this = this; 
    38.  
    
  38.         this.Stop(); 
    39.  
    
  39.         this.interval = setInterval(function(){ 
    40.  
    
  40.             _this.next();    
    41.  
    
  41.         },this.outTime); 
    42.  
    
  42.     }, 
    43.  
    
  43.     invoke : function(n){ 
    44.  
    
  44.         //具体显示那一帧 
    45.  
    
  45.         this.curItem = this.lists[n]; 
    46.  
    
  46.         //this.curItem.index = n; 
    47.  
    
  47.         var left = parseInt(this.scrollImg.style.left) || 0; 
    48.  
    
  48.         this.animateInterval && this.animateInterval(); 
    49.  
    
  49.         this.animateInterval = animate(this.scrollImg,{left:left},{left:(-n*this.imageWidth)-left},500,Quad); 
    50.  
    
  50.         //this.scrollImg.style.top = -n*300 + "px"; 
    51.  
    
  51.         this.recovery(); 
    52.  
    
  52.         this.curItem.className = this.hoverClass; 
    53.  
    
  53.          
    54.  
    
  54.     }, 
    55.  
    
  55.     Stop : function(){ 
    56.  
    
  56.         clearInterval(this.interval); 
    57.  
    
  57.     }, 
    58.  
    
  58.     next : function(){ 
    59.  
    
  59.         //这个函数是说明是下一帧 那么我们应该求出当前针. 
    60.  
    
  60.         var nextIndex = this.curItem.index + 1; 
    61.  
    
  61.         if(nextIndex >= this.lists.length){ 
    62.  
    
  62.             nextIndex = 0;   
    63.  
    
  63.         }    
    64.  
    
  64.         this.invoke(nextIndex); 
    65.  
    
  65.     }, 
    66.  
    
  66.     recovery : function(){ 
    67.  
    
  67.         for(var i=0;i<this.lists.length;i++){ 
    68.  
    
  68.             this.lists[i].className = "";    
    69.  
    
  69.         }    
    70.  
    
  70.     }    
    71.  
    
  71. } 
    72.  
   
 
   
 代码写到这里 突然感觉到 带左右箭头的控制按钮 原理应该也差不到了 到时候也搞下！