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>
解釋下：
carousel slide表示這是一個輪播元件，data-ride="carousel"是告訴JS，該元件的内容時用于動态輪播的。
carousel-inner表示輪播的内容部分。
item表示輪播中的一個條目，在本執行個體中輪播有兩個條目，每個條目都是一個帶标題的圖檔。
item active追加了active類，表示目前條目是活躍的，即目前顯示在使用者面前的。
每個條目中放置了一個圖檔，然後攜帶一個标題，标題用carousel-caption修飾。
是以如上簡單的一些代碼就生成了一個基本的輪播效果，注意圖檔會自動切換。
3. 添加輪播訓示器
輪播訓示器就是輪播條目下面的圓點，可以通過點選圓點切換條目，在<div id="carousel-demo">内添加如下代碼：
<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>
carousel-indicators表示目前元素時輪播訓示器樣式。
data-target="#carousel-demo"表示訓示器對應的是id為carousel-demo的輪播元件。
data-slide-to="0"表示點選該訓示器時，跳到第0個條目。
添加訓示器後效果如下：
4. 添加輪播控件
有時候除了訓示器，還會為輪播添加上一個、下一個的訓示控件，代碼如下：
<a class="left carousel-control" href="#carousel-demo" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-demo" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
注意通過href屬性關聯輪播元件，通過data-slide屬性訓示點選控件後的動作類型。效果如下：
5. 小結
Bootstrap輪播功能全面，實作簡單，值得推薦！