## 輪播插件 carousel.js
Bootstrap 的輪播插件（carousel.js）是一個(gè)靈活的、響應(yīng)式的、無(wú)縫循環(huán)播放的幻燈片切換插件，它的內(nèi)容可以是圖片、視頻、或者其他任何內(nèi)容。
**整體結(jié)構(gòu)**
Bootstrap中的輪播由一個(gè) class="carousel" 的容器定義，其中包含輪播指示器、輪播內(nèi)容、輪播的控制按鈕。為了確保在播放時(shí)，能夠?qū)刂瓢粹o和輪番指示器進(jìn)行正常定位，需要為容器定義一個(gè) id。
```html
<div id="myBanner" class="carousel" data-ride="carousel">
</div>
```
**1.** 輪播指示器
輪播指示器是一個(gè) class="carousel-indicators" 的有序列表，用來(lái)指示輪播的播放狀態(tài)，對(duì)用戶表現(xiàn)為一系列的小圓圈，實(shí)心圓表示當(dāng)前處于活動(dòng)狀態(tài)的輪番條目。
有序列表子元素 li 的個(gè)數(shù)必須與輪播內(nèi)容中的元素個(gè)數(shù)相等。子元素 li 的 data-target 屬性值指示目標(biāo)對(duì)象，必須設(shè)置為輪播容器的 id 值；data-slide-to 屬性指示點(diǎn)擊小圓圈時(shí)所要播放的輪播條目的索引值（索引從 0 開(kāi)始）。還可以為默認(rèn)處于活動(dòng)狀態(tài)的輪播條目添加 .active 類。默認(rèn)是第一個(gè)條目處于活動(dòng)狀態(tài)。
```html
<ol class="carousel-indicators">
<li data-target="#myBanner" data-slide-to="0"></li>
<li data-target="#myBanner" data-slide-to="1"></li>
<li data-target="#myBanner" data-slide-to="2" class="active"></li>
</ol>
```
**2.** 輪播內(nèi)容
輪播內(nèi)容是一個(gè)輪番條目的列表，整個(gè)列表包含在一個(gè) class="carousel-inner" 的容器中，列表中可以包含多個(gè)輪播條目，每個(gè)輪播條目包含在一個(gè) class="item" 的容器中。還可以為默認(rèn)處于活動(dòng)狀態(tài)的輪播條目添加 .active 類。默認(rèn)是第一個(gè)條目處于活動(dòng)狀態(tài)。如果添加 .active 類，并確保它與列表指示器中定義的默認(rèn)狀態(tài)保持一致。最簡(jiǎn)單的輪播內(nèi)容只包含圖片就可以了。例如：
```html
<div class="carousel-inner">
<div class="item active">
<img src="../img/timg.jpg" />
</div>
<div class="item">
<img src="../img/boot.png" />
</div>
</div>
```
如果需要給圖片添加自定義內(nèi)容，可以通過(guò)一個(gè) class="carousel-caption" 的容器來(lái)添加標(biāo)題和說(shuō)明。
```html
<div class="carousel-inner" >
<div class="item active">
<img src="../img/timg.jpg" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ...</p>
</div>
</div>
<div class="item">
<img src="../img/boot.png" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ...</p>
</div>
</div>
</div>
```
**3.** 輪播的控制按鈕
輪播的控制按鈕，用來(lái)人工控制輪播的播放，它包含兩個(gè)按鈕，一個(gè)控制向前播放，一個(gè)控制向后播放。通過(guò) .carousel-control 定義按鈕的樣式，.left 和 .right 定義按鈕的方向。href 屬性定義輪播包含框的 id。data-slide 屬性定義播放順序，取值 "prev" 表示播放上一個(gè)條目，取值 "next" 表示播放下一個(gè)條目。
```html
<a class="carousel-control left" href="#myBanner" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myBanner" data-slide="next">›</a>
```
*****
**調(diào)用方式**
**1.** 通過(guò)data數(shù)據(jù)屬性
如果不想編寫JavaScript代碼，就可以使用 data 屬性來(lái)調(diào)用輪播插件，并實(shí)現(xiàn)與輪播插件的交互功能。輪播插件需要兩個(gè)交互功能：一個(gè)是點(diǎn)擊控制按鈕進(jìn)行切換，一個(gè)是點(diǎn)擊輪播指示器的小圓點(diǎn)進(jìn)行切換。
1） 如果希望用戶點(diǎn)擊控制按鈕進(jìn)行切換，只需為左側(cè)按鈕提供 data-slide="prev" 屬性，為右側(cè)按鈕提供 data-slide="next" 屬性即可。
```html
<a class="carousel-control left" href="#myBanner" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myBanner" data-slide="next">›</a>
```
2）如果希望用戶點(diǎn)擊輪播指示器的小圓點(diǎn)進(jìn)行切換，需要為輪播指示器的 元素提供 data-target 和 data-slide-to 屬性。data-target 屬性的值為輪播包含框的 id，data-slide-to 屬性的值為點(diǎn)擊小圓圈后，要切換到的輪播條目的索引，即 class="item" 元素的索引，索引從 0 開(kāi)始。
```html
<ol class="carousel-indicators">
<li data-target="#myBanner" data-slide-to="0"></li>
<li data-target="#myBanner" data-slide-to="1"></li>
<li data-target="#myBanner" data-slide-to="2" class="active"></li>
</ol>
```
**2.** 通過(guò)JavaScript調(diào)用輪播
JavaScript調(diào)用輪番其實(shí)很簡(jiǎn)單，只需在腳本中調(diào)用 carousel() 方法。
Bootstrap還提供了其它一些方法，可以根據(jù)需要選擇使用：
* .carousel('cycle')：從左向右循環(huán)播放。
* .carousel('pause')：暫停循環(huán)播放。
* .carousel(number)：循環(huán)到指定幀（下標(biāo)從0開(kāi)始，類似數(shù)組）。
* .carousel('prev')：返回到上一幀。
* .carousel('next')：播放下一幀。
通過(guò)JavaScript調(diào)用，雖然輪番可以自動(dòng)播放，但兩個(gè)控制按鈕還無(wú)法正常工作。這時(shí)，就可以調(diào)用 carousel("prev") 和 carousel("next") 方法，來(lái)實(shí)現(xiàn)交互功能。
```js
$('.carousel a.left').click(function(){
$('.carousel').carousel("prev");
});
$('.carousel a.right').click(function(){
$('.carousel').carousel("next");
});
```
*****
**輪播插件的選項(xiàng)**
| 名稱 | 類型 | 默認(rèn)值 | 說(shuō)明 |
| --- | --- | --- | --- |
| interval | number | 5000 | 自動(dòng)循環(huán)時(shí)，每個(gè)項(xiàng)目延遲的時(shí)間量。如果為 false，輪播將不會(huì)自動(dòng)循環(huán) |
| pause | string | "hover" | 當(dāng)鼠標(biāo)進(jìn)入輪番區(qū)域時(shí)，暫停循環(huán)，鼠標(biāo)移出時(shí)繼續(xù)循環(huán) |
| wrap | boolean | true | 輪播是否連續(xù)循環(huán) |
| keyboard | boolean | true | 輪播是否對(duì)鍵盤事件作出反應(yīng) |
調(diào)用 carousel() 方法時(shí)，可以將這些選項(xiàng)作為一個(gè)對(duì)象參數(shù)。如下，每個(gè)圖片顯示1秒 :
```js
$('.carousel').carousel(({
interval: 1000
});
```
*****
**輪播圖事件**
| 事件 | 含義 |
| --- | --- |
| slide.bs.carousel | 當(dāng) slide 實(shí)例方法被調(diào)用時(shí)，立即觸發(fā)該事件 |
| slid.bs.carousel | 當(dāng)切換完一幀后，觸發(fā)該事件 |
~~~js
$('#myBanner').on('slide.bs.carousel', function () {
alert('1');
})
~~~
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項(xiàng)
- 2、柵格系統(tǒng)
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應(yīng)式工具
- 第三章 . bootstrap相關(guān)CSS應(yīng)用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關(guān)系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標(biāo)
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導(dǎo)航
- 7、導(dǎo)航條
- 8、路徑導(dǎo)航
- 9、分頁(yè)
- 10、標(biāo)簽
- 11、徽章
- 12、巨幕
- 13、頁(yè)頭
- 14、縮略圖
- 15、警告框
- 16、進(jìn)度條
- 17、媒體對(duì)象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過(guò)渡效果 (transition.js)
- 3、模態(tài)框 （modal.js）
- 4、下拉菜單 （dropdown.js）
- 5、滾動(dòng)監(jiān)聽(tīng) （scrollspy.js）
- 6、可切換標(biāo)簽 （tab.js）
- 7、工具提示 （tooltip.js）
- 8、彈出框 （popover.js）
- 9、警告信息 （alert.js）
- 10、按鈕 （button.js）
- 11、折疊插件（collapse.js）
- 12、輪播插件（carousel.js）
- 13、Affix插件（affix.js）