源码：

    
                 
     
        
      
            
                   
                   
                   
                   
                   
                   
               
      
        
      
            
                   
                   
                   
                   
               
      
        
      >        
      <    
     
        

效果图：

原理：

页面结构方面：

• 将轮播图容器设置成相对定位，宽度设置成图片的宽度；容器中分为四部分：轮播的图片；点击的小按钮；前一张；后一张

样式方面：

• 轮播图容器为相对定位，宽度/高度设置成图片的宽度/高度，设置overflow为hidden；
• 容器中的每一部分都设置成绝对定位，放到相应的位置；
• 轮播图片的容器宽度设置成所有图片的宽度和，left开始先设置为0；
• 每张图片宽度一样，都设成左浮动，左右图片都在一行排列，所以轮播图的实质是装有图片的容器的移动，每次移动的距离为一张图片的宽度，这样每次就只显示一张图片；
• 前一张/后一张设置成display为none，当鼠标移入总容器时，再设置成display为block

功能方面：

• 自动轮播为一个定时循环机制setInteval，鼠标移入，循环停止，移除循环继续；