<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 實現(xiàn)動畫效果，但是 Internet Explorer 8 & 9 不支持這些必要的 CSS 屬性。因此，使用這兩種瀏覽器時將會丟失過渡動畫效果。而且，Bootstrap 并不打算使用基于 jQuery 實現(xiàn)替代功能。

可選選項

在任何 .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>

為三個項，分別加上，然后效果就有了額。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt11.gif" alt="" />

可訪問性問題

輪播組件并不兼容可訪問性標(biāo)準(zhǔn)。如果需要兼容，請考慮其他展示幻燈片的方案。

用法

通過 data 屬性

通過 data 屬性可以很容易的控制輪播的定位。data-slide 可以接受控制播放位置的 prev 或 next 關(guān)鍵字。另外，還可以通過 data-slide-to 傳遞以 0 開始的幻燈片下標(biāo)。

data-ride="carousel" 屬性用來標(biāo)記在頁面加載之后即開始啟動的輪播組件。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt13.png" alt="" />

在最外層的輪播容器中添加即可

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

通過 JavaScript

手動啟動輪播組件（上面我們通過使用 data-ride 屬性進(jìn)行自動開啟輪播組件。）：

$('.carousel').carousel()

選項

可以將選項通過 data 屬性或 JavaScript 傳遞。對于 data 屬性，需要將選項名稱放到 data- 之后，例如 data-interval=""。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt14.png" alt="" />

方法

$("").carousel(options)

初始化輪播組件，接受一個可選的 object 類型的 options 參數(shù)，并開始幻燈片循環(huán)。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle') 從左到右循環(huán)各幀。

.carousel('pause') 停止輪播。

.carousel(number) 將輪播定位到指定的幀上（幀下標(biāo)以0開始，類似數(shù)組）。

.carousel('prev') 返回到上一幀。

.carousel('next') 轉(zhuǎn)到下一幀。

事件

Bootstrap 的輪播組件暴露了兩個事件用于監(jiān)聽。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt15.png" alt="" />

$('#carousel-example-generic').on('slide.bs.carousel', function () {
    alert(1);
})

就這樣為輪播組件綁定事件，然后在相應(yīng)的運(yùn)行時就會執(zhí)行的。這個在之前的 JavaScript 插件中講解的也比較多，形式都是通用的，所以只要會用就可以了。

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

輪播

Internet Explorer 8 & 9 不支持過渡動畫效果

可選選項

可訪問性問題

用法

通過 data 屬性

通過 JavaScript

選項

方法

事件