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

Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解

 更新時(shí)間：2016年05月17日 12:06:27   作者：雨鈍風(fēng)輕  
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解，需要的朋友可以參考下

圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。其主要顯示的效果就是多幅圖片輪回播放，從右向左播放，鼠標(biāo)懸停在圖片時(shí)會(huì)暫停播放，如果鼠標(biāo)懸?；騿螕粲蚁陆菆A點(diǎn)時(shí)，會(huì)顯示對(duì)應(yīng)的圖片。

這種圖片輪播效果，在Bootstrap框架中是通過(guò)Carousel插件來(lái)實(shí)現(xiàn)

演示效果截圖：

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" >-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel">
<!--第一步：設(shè)計(jì)輪播圖片的容器。-->
<!-- #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感-->
<ol class="carousel-indicators">
<!--第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--第三步：設(shè)計(jì)輪播圖片播放區(qū),使用 carousel-inner 樣式來(lái)控制-->
<div class="item active">
<img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="">
<div class="carousel-caption">
<h4>標(biāo)題一</h4>
<p>圖片一內(nèi)容簡(jiǎn)介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="">
<div class="carousel-caption">
<h4>標(biāo)題二/h4>
<p>圖片二內(nèi)容簡(jiǎn)介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="">
<div class="carousel-caption">
<h4>標(biāo)題三</h4>
<p>圖片三內(nèi)容簡(jiǎn)介</p>
</div>
</div>
</div>
<!--第四步：設(shè)計(jì)輪播圖片控制器。向前播放left carousel-control和向后播放的控制器-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;
<!--<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">-->
<span class="qlyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;
<span class="qlyphicon glyphicon-chevron-right"></span></a>
<!--<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="qlyphicon glyphicon-chevron-left"></span>
</a>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="qlyphicon glyphicon-chevron-right"></span>
</a>-->
</div>
<script>
$('.carousel').carousel()
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html> 
/*bootstrap.css文件第5835行～第5863行*/
.carousel-indicators {
position: absolute; /*整個(gè)計(jì)數(shù)區(qū)域絕對(duì)定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*設(shè)置其在Z軸的層級(jí)*/
/*讓整個(gè)計(jì)數(shù)區(qū)水平居中*/
left: 50%;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
/*設(shè)置當(dāng)前狀態(tài)樣式*/
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}

圖片輪播--聲明式觸輪播圖的播放

觸發(fā)輪播圖的播放方法也有兩種，一種是聲明式，另外一種是JavaScript方式。首先來(lái)看聲明式方法。

聲明式方法是通過(guò)定義 data 屬性來(lái)實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：

•data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。

•data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。

•data-slide 屬性：取值包括 prev，next，prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符。

•data-slide-to 屬性：用來(lái)傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。

除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性：

屬性名稱
類型
默認(rèn)值
描述
data-interval
number
5000
幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán)
data-pause
string
hover
默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放
data-wrap
布爾值
true
輪播是否持續(xù)循環(huán)

如下代碼實(shí)現(xiàn)“輪播不持續(xù)循環(huán)”和“輪播時(shí)間間隔為1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div>

上面三個(gè)屬性可以在容器元素上定義，也可以在標(biāo)示符（或左右控制鏈接）上定義，但是后者定義的優(yōu)先級(jí)比較高。

圖片輪播--JavaScript觸發(fā)方法

data-ride="carousel" 和 data-slide="prev"、 data-slide="next" 三個(gè)語(yǔ)句去掉了，我們來(lái)使用JS代碼實(shí)現(xiàn)“圖片自動(dòng)輪播”和“向前、向后按鈕”的功能實(shí)現(xiàn)。

使用JS實(shí)現(xiàn)“圖片自動(dòng)輪播”和“向前、向后按鈕”的功能實(shí)現(xiàn)

默認(rèn)情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁(yè)面加載之后就會(huì)自動(dòng)加載輪播圖片切換效果。如果沒(méi)有定義 data-ride 屬性，可以通過(guò) JavaScript 方法來(lái)觸發(fā)輪播圖片切換。具體使用方法如下：

復(fù)制代碼 代碼如下:

$(".carousel").carousel();

也可以通過(guò)容器的 ID 來(lái)指定：

復(fù)制代碼 代碼如下:

$("#slidershow").carousel();

在 carousel() 方法中可以設(shè)置具體的參數(shù)，如：

屬性名稱
類型
默認(rèn)值
描述
interval
number
5000
幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán)
pause
string
hover
默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放
wrap
布爾值
true
輪播是否持續(xù)循環(huán)

使用時(shí)，在初始化插件的時(shí)候可以傳關(guān)相關(guān)的參數(shù)，如：

$("#slidershow").carousel({
interval: 3000
});

實(shí)際上，當(dāng)我們給carousel()方法配置參數(shù)之后，輪播效果就能自動(dòng)切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡(jiǎn)單說(shuō)明如下：

•.carousel("cycle")：從左向右循環(huán)播放；

•.carousel("pause")：停止循環(huán)播放；

•.carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開始，類似數(shù)組；

•.carousel("prev")：返回到上一幀；

•.carousel("next")：下一幀

例如，前面的調(diào)用方法，向前和向后兩個(gè)按鈕還無(wú)法正常工作，其實(shí)可以通過(guò) .carousel("prev") 和 .carousel("next") 方法讓他們能正常工作，代碼如下：

$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
}); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" >
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--<script>
$(function() {
$('.carousel').carousel();
});
</script>-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html>

腳本之家推薦bootstrap相關(guān)專題：

BootStrap組件操作技巧

BootStrap相關(guān)知識(shí)匯總

以上所述是小編給大家介紹的Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論