bootstrap图片轮播由哪三部分组成

一个轮播图片主要包括三个部分：

☑ 轮播的图片

☑ 轮播图片的计数器

☑ 轮播图片的控制器

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。

代码如下:

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：

 

 
1
 
2
 
3
 
4
 
5

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

 
 

 
1
 …
 
 
 

 

 
 
 

 
 
 …