亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄 搜尋
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
文字

Bootstrap 輪播（Carousel）

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 carousel.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

實(shí)例

下面是一個(gè)簡(jiǎn)單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個(gè)循環(huán)播放元素的通用組件。為了實(shí)現(xiàn)輪播，您只需要添加帶有該標(biāo)記的代碼即可。不需要使用 data 屬性，只需要簡(jiǎn)單的基于 class 的開(kāi)發(fā)即可。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?簡(jiǎn)單的輪播（Carousel）插件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?id="myCarousel"?class="carousel?slide">
???<!--?輪播（Carousel）指標(biāo)?-->
???<ol?class="carousel-indicators">
??????<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>???
???<!--?輪播（Carousel）項(xiàng)目?-->
???<div?class="carousel-inner">
??????<div?class="item?active">
?????????<img?src="/wp-content/uploads/2014/07/slide1.png"?alt="First?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide2.png"?alt="Second?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide3.png"?alt="Third?slide">
??????</div>
???</div>
???<!--?輪播（Carousel）導(dǎo)航?-->
???<a?class="carousel-control?left"?href="#myCarousel"?
??????data-slide="prev">&lsaquo;</a>
???<a?class="carousel-control?right"?href="#myCarousel"?
??????data-slide="next">&rsaquo;</a>
</div>?

</body>
</html>

結(jié)果如下所示：

簡(jiǎn)單的輪播（Carousel）插件

可選的標(biāo)題

您可以通過(guò) .item 內(nèi)的 .carousel-caption 元素向幻燈片添加標(biāo)題。只需要在該處放置任何可選的 HTML 即可，它會(huì)自動(dòng)對(duì)齊并格式化。下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?輪播（Carousel）插件的標(biāo)題</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?id="myCarousel"?class="carousel?slide">
???<!--?輪播（Carousel）指標(biāo)?-->
???<ol?class="carousel-indicators">
??????<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>???
???<!--?輪播（Carousel）項(xiàng)目?-->
???<div?class="carousel-inner">
??????<div?class="item?active">
?????????<img?src="/wp-content/uploads/2014/07/slide1.png"?alt="First?slide">
?????????<div?class="carousel-caption">標(biāo)題?1</div>
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide2.png"?alt="Second?slide">
?????????<div?class="carousel-caption">標(biāo)題?2</div>
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide3.png"?alt="Third?slide">
?????????<div?class="carousel-caption">標(biāo)題?3</div>
??????</div>
???</div>
???<!--?輪播（Carousel）導(dǎo)航?-->
???<a?class="carousel-control?left"?href="#myCarousel"?
??????data-slide="prev">&lsaquo;</a>
???<a?class="carousel-control?right"?href="#myCarousel"?
??????data-slide="next">&rsaquo;</a>
</div>?


</body>
</html>

結(jié)果如下所示：

輪播（Carousel）插件的標(biāo)題

用法

  • 通過(guò) data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置。
    • 屬性 data-slide 接受關(guān)鍵字 prev 或 next，用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的位置。
    • 使用 data-slide-to 來(lái)向輪播床底一個(gè)原始滑動(dòng)索引，data-slide-to="2" 將把滑塊移動(dòng)到一個(gè)特定的索引，索引從 0 開(kāi)始計(jì)數(shù)。
    • data-ride="carousel" 屬性用于標(biāo)記輪播在頁(yè)面加載時(shí)就開(kāi)始動(dòng)畫(huà)播放。
  • 通過(guò) JavaScript：輪播（Carousel）可通過(guò) JavaScript 手動(dòng)調(diào)用，如下所示： 
    $('.carousel').carousel()

選項(xiàng)

有一些選項(xiàng)是通過(guò) data 屬性或 JavaScript 來(lái)傳遞的。下表列出了這些選項(xiàng)：

選項(xiàng)名稱 類型/默認(rèn)值 Data 屬性名稱 描述
interval number
默認(rèn)值：5000 		data-interval 自動(dòng)循環(huán)每個(gè)項(xiàng)目之間延遲的時(shí)間量。如果為 false，輪播將不會(huì)自動(dòng)循環(huán)。
pause string
默認(rèn)值："hover" 		data-pause 鼠標(biāo)進(jìn)入時(shí)暫停輪播循環(huán)，鼠標(biāo)離開(kāi)時(shí)恢復(fù)輪播循環(huán)。
wrap boolean
默認(rèn)值：true 		data-wrap 輪播是否連續(xù)循環(huán)。

方法

下面是一些輪播（Carousel）插件中有用的方法：

方法 描述 實(shí)例
.carousel(options) 初始化輪播為可選的 options 對(duì)象，并開(kāi)始循環(huán)項(xiàng)目。 
$('#identifier').carousel({
??interval:?2000
})
.carousel('cycle') 從左到右循環(huán)輪播項(xiàng)目。 
$('#identifier').carousel('cycle')
.carousel('pause') 停止輪播循環(huán)項(xiàng)目。 
$('#identifier')..carousel('pause')
.carousel(number) 循環(huán)輪播到某個(gè)特定的幀（從 0 開(kāi)始計(jì)數(shù)，與數(shù)組類似）。 
$('#identifier').carousel(number)
.carousel('prev') 循環(huán)輪播到上一個(gè)項(xiàng)目。 
$('#identifier').carousel('prev')
.carousel('next') 循環(huán)輪播到下一個(gè)項(xiàng)目。 
$('#identifier').carousel('next')

實(shí)例

下面的實(shí)例演示了方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?輪播（Carousel）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?id="myCarousel"?class="carousel?slide">
???<!--?輪播（Carousel）指標(biāo)?-->
???<ol?class="carousel-indicators">
??????<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>???
???<!--?輪播（Carousel）項(xiàng)目?-->
???<div?class="carousel-inner">
??????<div?class="item?active">
?????????<img?src="/wp-content/uploads/2014/07/slide1.png"?alt="First?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide2.png"?alt="Second?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide3.png"?alt="Third?slide">
??????</div>
???</div>
???<!--?輪播（Carousel）導(dǎo)航?-->
???<a?class="carousel-control?left"?href="#myCarousel"?
??????data-slide="prev">&lsaquo;</a>
???<a?class="carousel-control?right"?href="#myCarousel"?
??????data-slide="next">&rsaquo;</a>
???<!--?控制按鈕?-->
???<div?style="text-align:center;">
??????<input?type="button"?class="btn?start-slide"?value="Start">
??????<input?type="button"?class="btn?pause-slide"?value="Pause">
??????<input?type="button"?class="btn?prev-slide"?value="Previous?Slide">
??????<input?type="button"?class="btn?next-slide"?value="Next?Slide">
??????<input?type="button"?class="btn?slide-one"?value="Slide?1">
??????<input?type="button"?class="btn?slide-two"?value="Slide?2">????????????
??????<input?type="button"?class="btn?slide-three"?value="Slide?3">
???</div>
</div>?
<script>
???$(function(){
??????//?初始化輪播
??????$(".start-slide").click(function(){
?????????$("#myCarousel").carousel('cycle');
??????});
??????//?停止輪播
??????$(".pause-slide").click(function(){
?????????$("#myCarousel").carousel('pause');
??????});
??????//?循環(huán)輪播到上一個(gè)項(xiàng)目
??????$(".prev-slide").click(function(){
?????????$("#myCarousel").carousel('prev');
??????});
??????//?循環(huán)輪播到下一個(gè)項(xiàng)目
??????$(".next-slide").click(function(){
?????????$("#myCarousel").carousel('next');
??????});
??????//?循環(huán)輪播到某個(gè)特定的幀?
??????$(".slide-one").click(function(){
?????????$("#myCarousel").carousel(0);
??????});
??????$(".slide-two").click(function(){
?????????$("#myCarousel").carousel(1);
??????});
??????$(".slide-three").click(function(){
?????????$("#myCarousel").carousel(2);
??????});
???});
</script>


</body>
</html>

結(jié)果如下所示：

輪播（Carousel）插件方法

事件

下表列出了輪播（Carousel）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

事件 描述 實(shí)例
slide.bs.carousel 當(dāng)調(diào)用 slide 實(shí)例方法時(shí)立即觸發(fā)該事件。 
$('#identifier').on('slide.bs.carousel',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
slid.bs.carousel 當(dāng)輪播完成幻燈片過(guò)渡效果時(shí)觸發(fā)該事件。 
$('#identifier').on('slid.bs.carousel',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})

實(shí)例

下面的實(shí)例演示了事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?輪播（Carousel）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?id="myCarousel"?class="carousel?slide">
???<!--?輪播（Carousel）指標(biāo)?-->
???<ol?class="carousel-indicators">
??????<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>???
???<!--?輪播（Carousel）項(xiàng)目?-->
???<div?class="carousel-inner">
??????<div?class="item?active">
?????????<img?src="/wp-content/uploads/2014/07/slide1.png"?alt="First?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide2.png"?alt="Second?slide">
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide3.png"?alt="Third?slide">
??????</div>
???</div>
???<!--?輪播（Carousel）導(dǎo)航?-->
???<a?class="carousel-control?left"?href="#myCarousel"?
??????data-slide="prev">&lsaquo;</a>
???<a?class="carousel-control?right"?href="#myCarousel"?
??????data-slide="next">&rsaquo;</a>
</div>?
<script>
???$(function(){
??????$('#myCarousel').on('slide.bs.carousel',?function?()?{
?????????alert("當(dāng)調(diào)用?slide?實(shí)例方法時(shí)立即觸發(fā)該事件。");
??????});
???});
</script>

</body>
</html>

結(jié)果如下所示：

輪播（Carousel）插件事件
上一篇： 下一篇：