本文主要來學習一下JavaScript插件--輪播。廢話不多說，直接進入學習。
輪播
下面先來展示的就是此插件和相關組件製作的輪播案例。
<body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" style="text-align:center"> <div class="item active"> <img alt="First slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=First slide" ></img> </div> <div class="item"> <img alt="Second slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Second slide" ></img> </div> <div class="item"> <img alt="Third slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Third slide" ></img> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //$('.carousel').carousel('next'); </script> </body>
Internet Explorer 8 & 9不支持過渡動畫效果
Bootstrap基於CSS3實現動畫效果，但是Internet Explorer 8 & 9不支持這些必要的CSS屬性。因此，使用這兩種瀏覽器時將會丟失過渡動畫效果。而且，Bootstrap並不打算使用基於jQuery實現替代功能。
可選選項
在任何.item中均可以通過添加.carousel-caption從而爲每幀幻燈片添加說明文字。也可以添加任何HTML代碼，這些HTML代碼將會被自動排列和格式化。
<div class="item active"> <img alt="First slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=First slide" ></img> <div class="carousel-caption"> <h4>First Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div>
爲三個項，分別加上，然後效果就有了額。
可訪問性問題
輪播組件並不兼容可訪問性標準。如果需要兼容，請考慮其他展示幻燈片的方案。
用法
通過data屬性
通過data屬性可以很容易的控制輪播的定位。data-slide可以接受控制播放位置的prev或next關鍵字。另外，還可以通過data-slide-to傳遞以0開始的幻燈片下標。
data-ride="carousel"屬性用來標記在頁面加載之後即開始啓動的輪播組件。
在最外層的輪播容器中添加即可
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
通過JavaScript
手動啓動輪播組件（上面我們通過使用data-ride屬性進行自動開啓輪播組件。）：
$('.carousel').carousel()
選項
可以將選項通過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之後，例如data-interval=""。
方法
$("").carousel(options)
初始化輪播組件，接受一個可選的object類型的options參數，並開始幻燈片循環。
$('.carousel').carousel({ interval: 2000 })
.carousel('cycle') 從左到右循環各幀。
.carousel('pause') 停止輪播。
.carousel(number) 將輪播定位到指定的幀上（幀下標以0開始，類似數組）。
.carousel('prev') 返回到上一幀。
.carousel('next') 轉到下一幀。
事件
Bootstrap的輪播組件暴露了兩個事件用於監聽。
$('#carousel-example-generic').on('slide.bs.carousel', function () { alert(1); })
就這樣爲輪播組件綁定事件，然後在相應的運行時就會執行的。這個在之前的JavaScript插件中講解的也比較多，形式都是通用的，所以只要會用就可以了。
圖片
這是幾個比較實用的圖片輪播插件，效果很不錯，合理的使用，總會給你的頁面加分的。JavaScript插件幾乎也都學習完了，雖然只是淺層的只是簡單的會用，但是還是收穫了不少。
