Bootstrap图片轮播插件carousel

start：需要引入bootstrap轮播插件 carousel.js 或者直接引入bootstrap.min.js

基本原理：

第一步：设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式，给这个容器一个ID值，方便后面采用data属性触发。

第二步：设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器，采用carousel-indicators样式，一般用ol有序列表（有几张图片放置几个li），以白点的形式展示(具体样式在bootstrap.css文件第5835行起)

第三步：设置轮播图片播放区
最关键的区域，主要用来放置需要轮播的图片，用carousel-inner样式控制，用item容器放置每张轮播的图片。

        

            

            

            

        

    

        

            ![](img/indexLsit04.png)
        
        

            ![]()
        
    

第四步：设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器，在此，用carousel-control样式配合left、right来实现。

        

            

            

            

        

    

        

            ![](img/indexLsit04.png)
        
        

            ![]()
        
    

    
        
    
    
        
    

demo:

  
  
  
      
      
      
      
      
      
      

      
      
      

      
      
      
      
  
  

  

      
    
  
        
  
        
  
        
  
        
  
        
  
    
  

      
    
  
        
  
            ![](img/indexLsit01.png)  
        
  
        
![](img/indexLsit02.png)
  
        
![](img/indexLsit03.png)
  
        
![](img/indexLsit04.png)
  
        
![](img/indexLsit05.png)
  
    
  

      
      
          
      
      
          
      

  

  
  

呈现出的样式：