第三步：設(shè)計(jì)輪播圖片播放區(qū)。輪播圖整個效果中，播放區(qū)是最關(guān)鍵的一個區(qū)域，這個區(qū)域主要用來放置需要輪播的圖片。這個區(qū)域使用 carousel-inner 樣式來控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過 item 容器來放置每張輪播的圖片：

<div id="slidershow" class="carousel">
    <!-- 設(shè)置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        …
    </ol>
    <!-- 設(shè)置輪播圖片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
        </div>
        …
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
        </div>
    </div>
</div>

其主要通過 carousel-inner 來控制其樣式呈現(xiàn)。

運(yùn)行效果如下：

上面顯示的圖片區(qū)只實(shí)現(xiàn)了圖片播放，但很多輪播圖片效果，在每個圖片上還對應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對應(yīng)的代碼：

<div id="slidershow" class="carousel">
    <!-- 設(shè)置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
    …
    </ol>
    <!-- 設(shè)置輪播圖片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
            <!-- 圖片對應(yīng)標(biāo)題和描述內(nèi)容 -->
            <div class="carousel-caption">
                <h3>圖片標(biāo)題</h3>
                <p>描述內(nèi)容...</p>
            </div>
        </div>
    …
    </div>
</div>

運(yùn)行效果如下：