实现原理：隐藏所有要显示的元素，然后指定要显示的为block，宽、高自适应。

结构：

容器：最外层为一个div 使用data-ride="carousel" 来指定为轮播插件。并提供一个id，方便圆圈指示符的关联。

圆圈指示符：ol 列表 ，每个列表指定data-slide-to="0/1/2/3/..."，用于标记当前圆圈的索引号。

图片列表：最外层一个div，每一个img被一个div ,class="item"包裹住。

css样式：

Carousel：只有一个相对定位标记

Carousel-inner：旋转图片列表区域，其中每项有item来修饰

其中的active、next、prev都认为是可见的

Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置

Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式

Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体

    
     
     
         
      
         
      
         
      
         
      
         
      
     
     
     
     
         
      
             
                
      
         
      
             
                
      
         
      
             
                
      
         
      
             
                
      
         
      
             
                
      
     
     
     
          
      
    
 原文地址：http://www.jb51.net/article/86421.htm