Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
案例
下面展示的就是此插件和相關組件制作的輪播案例。
<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"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </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>
Internet Explorer 8 & 9不支持過渡動畫效果
Bootstrap基於CSS3實現動畫效果，但是Internet Explorer 8 & 9不支持這些必要的CSS屬性。因此，使用這兩種浏覽器時將會丟失過渡動畫效果。而且，我們並不打算使用基於jQuery實現替代功能。
可選選項
在任何.item中均可以通過添加.carousel-caption從而為每幀幻燈片添加說明文字。也可以添加任何HTML代碼，這些HTML代碼將會被自動排列和格式化。
900x500
<div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
可訪問性問題
輪播組件並不兼容可訪問性標准。如果需要兼容，請考慮其他展示幻燈片的方案。
用法
通過data屬性
通過data屬性可以很容易的控制輪播的定位。data-slide可以接受控制播放位置的prev或next關鍵字。另外，還可以通過data-slide-to傳遞以0開始的幻燈片下標。
data-ride="carousel"屬性用來標記在頁面加載之後即開始啟動的輪播組件。
通過JavaScript
手動啟動輪播組件：
復制代碼 代碼如下:
$('.carousel').carousel()
選項
可以將選項通過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之後，例如data-interval=""。
名稱
類型
默認值
描述
interval
number
5000
幻燈片輪換的等待時間。如果為false，輪播將不會自動開始循環。
pause
string
"hover"
鼠標停留在幻燈片區域即暫停輪播，鼠標離開即啟動輪播。
wrap
boolean
true
輪播是否持續循環。
方法
.carousel(options)
初始化輪播組件，接受一個可選的object類型的options參數，並開始幻燈片循環。
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
從左到右循環各幀。
.carousel('pause')
停止輪播。
.carousel(number)
將輪播定位到指定的幀上（幀下標以0開始，類似數組）。
.carousel('prev')
返回到上一幀。
.carousel('next')
轉到下一幀。
事件
Bootstrap的輪播組件暴露了兩個事件用於監聽。
事件類型
描述
slide.bs.carousel
此事件在slide方法被調用之後立即出發。
slid.bs.carousel
當所有幻燈片播放完之後被觸發。
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
以上所述是小編給大家介紹的基於JS插件制作BootStrap輪播效果案例詳解的相關知識，希望能夠幫助到大家!