知識點：

1、模態框插件
2、輪播圖插件

1、模態框插件

模態框的彈窗組件需要三層 div 容器元素，分別為 modal(模態聲明層)、 dialog(窗口聲明層)、content(內容層)
在內容層里面，還有三層，分別為 header(頭部)、body(主體)、footer(注腳)
//模態框去掉 show，增加一個 id
<div class="modal" id="myModal">
//點擊觸發模態框顯示
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 點擊彈窗 </button>
//彈窗的大小有三種，默認情況下是正常，還有 lg(大)和 sm(小)
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可設置淡入淡出效果
<div class="modal fade" id="myModal">
所有的插件，都是基于 JavaScript/jQuery 的。四個要素：用法、參數、方法和事件。

1.用法

可以通過 data 屬性
//data-toggle data-toggle="modal" data-target="#myModal"
data-toggle 表示觸發類型
data-target 表示觸發的節點
如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal"取代
建議使用 data-target。除了 data-toggle 和 data-target 兩個聲明 屬性外，還有一些可以用選項

2、參數

data-backdrop 布爾值或 'static' 默認值 true，表示背景存在黑灰透明 遮罩，且單擊空白背景可關閉彈窗；
如果為 false，表示背景不存在黑灰 透明遮罩，且點擊空白背景不可關閉 彈窗；
如果是字符串'static'，表示背景存 在黑灰透明遮罩，且點擊空白不可關 閉彈窗。
data-keyboard 布爾值 true 如果是 true，按 esc 鍵會關閉窗口； 如果是 false，按 esc 鍵會不會關閉。
data-show 布爾值 true 如果是 true，初始化時，默認顯示； 如果是 false，初始化時，默認隱藏。
remote url 路徑 空值 如果值不是以#號開頭，則表示一個 url 地址，加載 url 內容到 modal-content 容器里，并只加載一 次。
如果是#號，就是取代 data-target 的方法。
在 JavaScript 直接設置
//通過 jQuery 方式聲明
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});

3、方法

toggle .modal('toggle'); 觸發時，反轉切換彈窗狀態
show .modal('show'); 觸發時，顯示彈窗
hide .modal('hide'); 觸發時，關閉彈窗
//點擊顯示彈窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
$('#myModal').modal({
show : false,
});

4、事件

show.bs.modal 在 show 方法調用時立即觸發。
shown.bs.modal 在模態框完全顯示出來，并且等 CSS 動畫完成之后觸 發。
hide.bs.modal 在 hide 方法調用時，但還未關閉隱藏時觸發。
hidden.bs.modal 在模態框完全隱藏之后，并且等 CSS 動畫完成之后觸 發。
$('#myModal').on('show.bs.modal', function () {
alert('在 show 方法調用時立即觸發！');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('遠程數據加載完畢后觸發！');
});

2、輪播圖插件

data 屬性解釋：

1.data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置；

2.data-slide-to 來向輪播底部創建一個原始滑動索引，data-slide-to="2"將把滑 動塊移動到一個特定的索引，索引從 0 開始計數。

3.data-ride="carousel"屬性用戶標記輪播在頁面加載時開始動畫播放。

data-interval 默認值 5000，幻燈片的等待時間(毫秒)。如果為 false，輪播將不會自動開始循環。
data-pause 默認鼠標停留在幻燈片區域(hover)即暫停輪播，鼠 標離開即啟動輪播。
data-wrap 默認值 true，輪播是否持續循環。
如果在 JavaScript 調用就直接使用鍵值對方法，并去掉 data-；
$('#myCarousel').carousel({ //設置自定義屬性
interval : 2000,//設置自動播放/2 秒
pause : 'hover',//設置暫停按鈕的事件
wrap : false, //只播一次
});

方法：
cycle 循環各幀(默認從左到右)
pause 停止輪播
number 輪播到指定的圖片上(小標從 0 開始，類似數組)
prev 循環輪播到上一個項目
next 循環輪播到下一個項目
$('button').on('click', function () {//點擊按鈕執行
$('#myCarousel').carousel('cycle'); //點擊后，自動播放
}

事件：
slide.bs.carousel 當調用 slide 實例方式時立即觸發該事件。
slid.bs.carousel 當輪播完成一個幻燈片觸發該事件。
$('#myCarousel').on('slide.bs.carousel', function () {
alert('當調用 slide 實例方式時立即觸發');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('當輪播完成一個幻燈片觸發');
});