欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果

 更新時(shí)間：2016年05月16日 14:40:09   投稿：lijiao  
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果的具體代碼，對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下

本文主要來學(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不支持過渡動(dòng)畫效果

Bootstrap基于CSS3實(shí)現(xiàn)動(dòng)畫效果，但是Internet Explorer 8 & 9不支持這些必要的CSS屬性。因此，使用這兩種瀏覽器時(shí)將會(huì)丟失過渡動(dòng)畫效果。而且，Bootstrap并不打算使用基于jQuery實(shí)現(xiàn)替代功能。

可選選項(xiàng)

在任何.item中均可以通過添加.carousel-caption從而為每幀幻燈片添加說明文字。也可以添加任何HTML代碼，這些HTML代碼將會(huì)被自動(dòng)排列和格式化。

<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>

為三個(gè)項(xiàng)，分別加上，然后效果就有了額。

可訪問性問題

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

用法 通過data屬性

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

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

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

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

通過JavaScript

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

$('.carousel').carousel()

選項(xiàng)

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

方法

$("").carousel(options)

初始化輪播組件，接受一個(gè)可選的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的輪播組件暴露了兩個(gè)事件用于監(jiān)聽。

$('#carousel-example-generic').on('slide.bs.carousel', function ()

{

alert(1);

})

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

圖片

這是幾個(gè)比較實(shí)用的圖片輪播插件，效果很不錯(cuò)，合理的使用，總會(huì)給你的頁面加分的，希望對(duì)大家的學(xué)習(xí)有所幫助。

如果還不過癮的話大家可以查看這些文章進(jìn)行深入學(xué)習(xí)： 《Bootstrap學(xué)習(xí)教程》小編和大家共同進(jìn)步！

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附2個(gè)精彩的專題：

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論