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

direktori cari
Bootstrap 基礎教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網格系統(tǒng) Bootstrap 網格系統(tǒng)實例：堆疊的水平 Bootstrap 網格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網格系統(tǒng)實例：中型和大型設備 Bootstrap 響應式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導航欄 Bootstrap 導航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標題（Page Header） Bootstrap 字體圖標(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導航（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 編輯器
watak

Bootstrap 輪播（Carousel）

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

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

實例

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

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?簡單的輪播（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）指標?-->
???<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）項目?-->
???<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）導航?-->
???<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>

結果如下所示：

簡單的輪播（Carousel）插件

可選的標題

您可以通過 .item 內的 .carousel-caption 元素向幻燈片添加標題。只需要在該處放置任何可選的 HTML 即可，它會自動對齊并格式化。下面的實例演示了這點：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?輪播（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）指標?-->
???<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）項目?-->
???<div?class="carousel-inner">
??????<div?class="item?active">
?????????<img?src="/wp-content/uploads/2014/07/slide1.png"?alt="First?slide">
?????????<div?class="carousel-caption">標題?1</div>
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide2.png"?alt="Second?slide">
?????????<div?class="carousel-caption">標題?2</div>
??????</div>
??????<div?class="item">
?????????<img?src="/wp-content/uploads/2014/07/slide3.png"?alt="Third?slide">
?????????<div?class="carousel-caption">標題?3</div>
??????</div>
???</div>
???<!--?輪播（Carousel）導航?-->
???<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>

結果如下所示：

輪播（Carousel）插件的標題

用法

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

選項

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

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

方法

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

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

實例

下面的實例演示了方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?輪播（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）指標?-->
???<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）項目?-->
???<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）導航?-->
???<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)輪播到上一個項目
??????$(".prev-slide").click(function(){
?????????$("#myCarousel").carousel('prev');
??????});
??????//?循環(huán)輪播到下一個項目
??????$(".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>

結果如下所示：

輪播（Carousel）插件方法

事件

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

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

實例

下面的實例演示了事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?輪播（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）指標?-->
???<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）項目?-->
???<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）導航?-->
???<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("當調用?slide?實例方法時立即觸發(fā)該事件。");
??????});
???});
</script>

</body>
</html>

結果如下所示：

輪播（Carousel）插件事件
Artikel sebelumnya： Artikel seterusnya：