JS組件Bootstrap實現(xiàn)圖片輪播效果
本文主要來學(xué)習(xí)一下JavaScript插件--輪播。廢話不多說，直接進(jìn)入學(xué)習(xí)。完整教程可查看：Bootstrap3.0教程
輪播
下面先來展示的就是此插件和相關(guān)組件制作的輪播案例。
<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 >
</img>
</div>
<div class="item">
<img >
</img>
</div>
<div class="item">
<img >
</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 > </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>
為三個項，分別加上，然后效果就有了額。
可訪問性問題
輪播組件并不兼容可訪問性標(biāo)準(zhǔn)。如果需要兼容，請考慮其他展示幻燈片的方案。
用法 通過data屬性
通過data屬性可以很容易的控制輪播的定位。data-slide可以接受控制播放位置的prev或next關(guān)鍵字。另外，還可以通過data-slide-to傳遞以0開始的幻燈片下標(biāo)。
data-ride="carousel"屬性用來標(biāo)記在頁面加載之后即開始啟動的輪播組件。
在最外層的輪播容器中添加即可
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
通過JavaScript
手動啟動輪播組件（上面我們通過使用data-ride屬性進(jìn)行自動開啟輪播組件。）：
$('.carousel').carousel()
選項
可以將選項通過data屬性或JavaScript傳遞。對于data屬性，需要將選項名稱放到data-之后，例如data-interval=""。
方法
$("").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)聽。
$('#carousel-example-generic').on('slide.bs.carousel', function ()
{
alert(1);
})
就這樣為輪播組件綁定事件，然后在相應(yīng)的運(yùn)行時就會執(zhí)行的。這個在之前的JavaScript插件中講解的也比較多，形式都是通用的，所以只要會用就可以了。
圖片
這是幾個比較實用的圖片輪播插件，效果很不錯，合理的使用，總會給你的頁面加分的，希望對大家的學(xué)習(xí)有所幫助。
如果還不過癮的話大家可以查看這些文章進(jìn)行深入學(xué)習(xí)： 《Bootstrap學(xué)習(xí)教程》小編和大家共同進(jìn)步！
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附2個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了深入理解es6塊級作用域的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來實現(xiàn)一個簡單的拖拽效果,需要的朋友可以參考下2023-09-09
javascript實現(xiàn)跟隨鼠標(biāo)移動的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)跟隨鼠標(biāo)移動的圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
下面小編就為大家?guī)硪黄趈s中實現(xiàn)郵箱格式的驗證方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識詳解
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript實現(xiàn)瀏覽器網(wǎng)頁自動滾動并點擊的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)瀏覽器網(wǎng)頁的自動滾動并點擊的示例代碼，幫助大家更好的理解和學(xué)習(xí)JavaScript的使用，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了微信小程序畫布顯示圖片繪制矩形選區(qū)效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-05-05
這篇文章主要介紹了淺析JavaScript中的變量提升,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
Bootstrap是twitter的工程師在業(yè)余時間開發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識bootstrap的相關(guān)知識，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
微信小程序中的畫布是非常重要的展示控件,其相當(dāng)于HTML中的canvas控件,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)Canvas畫板的相關(guān)資料,需要的朋友可以參考下2024-08-08