5-7 图片轮播--轮播图片的设计（一）

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

  ☑ 轮播的图片

  ☑ 轮播图片的计数器

  ☑ 轮播图片的控制器

复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。那么在 Bootstrap 框架中，轮播图是如何设计的呢？

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

<div id="slidershow" class="carousel"></div>

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

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现，其具体样式如下：

/*bootstrap.css文件第5835行～第5863行*/
.carousel-indicators {
    position: absolute; /*整个计数区域绝对定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*设置其在Z轴的层级*/
    /*让整个计数区水平居中*/
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}
/*设置当前状态样式*/
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}