一個輪播圖片主要包括三個部分：

  ? 輪播的圖片

  ? 輪播圖片的計(jì)數(shù)器

  ? 輪播圖片的控制器

復(fù)雜一點(diǎn)的輪播圖片，每個輪播區(qū)會帶有對應(yīng)的標(biāo)題和描述內(nèi)容。那么在 Bootstrap 框架中，輪播圖是如何設(shè)計(jì)的呢？

第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個容器定義一個 ID 值，方便后面采用 data 屬性來聲明觸發(fā)。

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

第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 div.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個li)，一般采用有順列表來制作：

<div id="slidershow" class="carousel">
<!-- 設(shè)置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

在 Bootstrap 框架中，輪播圖片計(jì)數(shù)器，都是以圓點(diǎn)向大家呈現(xiàn)，其具體樣式如下：

/*bootstrap.css文件第5835行～第5863行*/
.carousel-indicators {
    position: absolute; /*整個計(jì)數(shù)區(qū)域絕對定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*設(shè)置其在Z軸的層級*/
    /*讓整個計(jì)數(shù)區(qū)水平居中*/
    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;
}
/*設(shè)置當(dāng)前狀態(tài)樣式*/
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}