1. 概述

要想從頭到尾來實現一個比較好看且穩定的輪播控制元件，還是有一定難度的。

一個好看的輪播，能瞬間提高網站的整體檔次，很多購物網站或者影片網站在首頁最顯眼的位置，都是放置輪播大圖元件。

如果是使用Bootstrap框架的話，開發一個輪播就非常容易了，因為Bootstrap已內建輪播元件，拿來即用即可。

本節我們就來學習下Boostrap的輪播元件。

2. 基本輪播

先上程式碼如下：

 				div id="carousel-demo" class="carousel slide" data-ride="carousel" style="width:500px;height:350px;">
                    div class="carousel-inner">
                        div class="item active">
                            img src="1.jpg" alt="...">
                            div class="carousel-caption">
                                圖片1
                            div>
                        div>
                        div class="item">
                            img src="2.jpg" alt="...">
                            div class="carousel-caption">
                                圖片2
                            div>
                        div>
                    div>
             	div>

解釋下：

1. carousel slide表示這是一個輪播元件，data-ride="carousel"是告訴JS，該元件的內容時用於動態輪播的。
2. carousel-inner表示輪播的內容部分。
3. item表示輪播中的一個條目，在本例項中輪播有兩個條目，每個條目都是一個帶標題的圖片。
4. item active追加了active類，表示當前條目是活躍的，即當前顯示在使用者面前的。
5. 每個條目中放置了一個圖片，然後攜帶一個標題，標題用carousel-caption修飾。

所以如上簡單的一些程式碼就生成了一個基本的輪播效果，注意圖片會自動切換。

3. 新增輪播指示器

輪播指示器就是輪播條目下面的圓點，可以透過點選圓點切換條目，在

    				ol class="carousel-indicators">
                       li data-target="#carousel-demo" data-slide-to="0" class="active">li>
                       li data-target="#carousel-demo" data-slide-to="1">li>
                   ol>

                   a class="left carousel-control" href="#carousel-demo" data-slide="prev">
                       span class="glyphicon glyphicon-chevron-left">span>
                       span class="sr-only">Previousspan>
                   a>
                   a class="right carousel-control" href="#carousel-demo" data-slide="next">
                       span class="glyphicon glyphicon-chevron-right">span>
                       span class="sr-only">Nextspan>
                   a>