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

directory search
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ī)、平板電腦、臺式電腦 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 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 輪播（Carousel）

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

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

實(shí)例

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

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

</body>
</html>

結(jié)果如下所示：

簡單的輪播（Carousel）插件

可選的標(biāo)題

您可以通過 .item 內(nèi)的 .carousel-caption 元素向幻燈片添加標(biāo)題。只需要在該處放置任何可選的 HTML 即可，它會自動對齊并格式化。下面的實(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)題

用法

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

選項(xiàng)

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

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

方法

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

方法 描述 實(shí)例
.carousel(options) 初始化輪播為可選的 options 對象，并開始循環(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)輪播到某個特定的幀（從 0 開始計數(shù)，與數(shù)組類似）。 
$('#identifier').carousel(number)
.carousel('prev') 循環(huán)輪播到上一個項(xiàng)目。 
$('#identifier').carousel('prev')
.carousel('next') 循環(huán)輪播到下一個項(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)輪播到上一個項(xiàng)目
??????$(".prev-slide").click(function(){
?????????$("#myCarousel").carousel('prev');
??????});
??????//?循環(huán)輪播到下一個項(xiàng)目
??????$(".next-slide").click(function(){
?????????$("#myCarousel").carousel('next');
??????});
??????//?循環(huán)輪播到某個特定的幀?
??????$(".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í)例方法時立即觸發(fā)該事件。 
$('#identifier').on('slide.bs.carousel',?function?()?{
??//?執(zhí)行一些動作...
})
slid.bs.carousel 當(dāng)輪播完成幻燈片過渡效果時觸發(fā)該事件。 
$('#identifier').on('slid.bs.carousel',?function?()?{
??//?執(zhí)行一些動作...
})

實(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í)例方法時立即觸發(fā)該事件。");
??????});
???});
</script>

</body>
</html>

結(jié)果如下所示：

輪播（Carousel）插件事件
Previous article： Next article：