腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

更新時間：2016年05月17日 12:06:27 作者：雨鈍風(fēng)輕

圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實例詳解，需要的朋友可以參考下

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

這種圖片輪播效果，在Bootstrap框架中是通過Carousel插件來實現(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è)計輪播圖片的容器。-->
<!-- #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感-->
<ol class="carousel-indicators">
<!--第二步：設(shè)計輪播圖片計數(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è)計輪播圖片播放區(qū),使用 carousel-inner 樣式來控制-->
<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)容簡介</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)容簡介</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)容簡介</p>
</div>
</div>
</div>
<!--第四步：設(shè)計輪播圖片控制器。向前播放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; /*整個計數(shù)區(qū)域絕對定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*設(shè)置其在Z軸的層級*/
/*讓整個計數(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方式。首先來看聲明式方法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

也可以通過容器的 ID 來指定：

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

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

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

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

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

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

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

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

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

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

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

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

例如，前面的調(diào)用方法，向前和向后兩個按鈕還無法正常工作，其實可以通過 .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)知識匯總

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

您可能感興趣的文章: