首頁 > 開發者 > JavaScript
BootStrap學習(7)_輪播圖，bootstrap
一、輪播圖
Bootstrap 輪播（Carousel）外掛程式是一種靈活的響應式的向網站添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是映像、內嵌架構、視頻或者其他您想要放置的任何類型的內容。
如果您想要單獨引用該外掛程式的功能，那麼您需要引用BootStrap中的 carousel.js。
樣本:
1.使用 Bootstrap 輪播（Carousel）外掛程式顯示了一個迴圈播放元素的萬用群組件。為了實現輪播，您只需要添加帶有該標記的代碼即可。不需要使用 data 屬性，只需要簡單的基於 class 的開發即可。
2.可選的標題：您可以通過 .item 內的 .carousel-caption 元素向投影片添加標題。只需要在該處放置任何可選的 HTML 即可，它會自動對齊並格式化。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <style type="text/css" > img { width:500px; height:400px; } #img { width:500px; height:400px; } </style></head><body style="margin-top: 20px; margin-left: 20px;"> <div id="img"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000"> <!-- 輪播（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="../Imgs/img1/pic1.jpg" alt="first" /> <div class="carousel-caption">企鵝</div> </div> <div class="item"> <img src="../Imgs/img1/pic21.jpg" alt="seconed"/> </div> <div class="item"> <img src="../Imgs/img1/pic31.jpg" alt="third" /> <div class="carousel-caption">考拉</div> </div> </div> <!-- 輪播（Carousel）導航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div> </div></body></html>
效果:
用法:
$('.carousel').carousel()
選項
| 選項名稱 | 類型預設值 | Data屬性名稱 | 描述 |
| interval | number 預設值：5000 |
data-interval | 自動迴圈每個項目之間延遲的時間量。如果為 false，輪播將不會自動迴圈。 |
| pause | string 預設值："hover" |
data-pause | 滑鼠進入時暫停輪播迴圈，滑鼠離開時恢複輪播迴圈。 |
| wrap | boolean 預設值：true |
data-wrap | 輪播是否連續迴圈。 |
方法
下面是一些輪播（Carousel）外掛程式中有用的方法：
| 方法 | 描述 | 執行個體 |
| .carousel(options) | 初始化輪播為可選的 options 對象，並開始迴圈項目。 | $('#identifier').carousel({ interval: 2000}) |
| .carousel('cycle') | 從左至右迴圈輪播項目。 | $('#identifier').carousel('cycle') |
| .carousel('pause') | 停止輪播迴圈項目。 | $('#identifier')..carousel('pause') |
| .carousel(number) | 迴圈輪播到某個特定的幀（從 0 開始計數，與數組類似）。 | $('#identifier').carousel(number) |
| .carousel('prev') | 迴圈輪播到上一個項目。 | $('#identifier').carousel('prev') |
| .carousel('next') | 迴圈輪播到下一個項目。 | $('#identifier').carousel('next') |
事件
下表列出了輪播（Carousel）外掛程式中要用到的事件。這些事件可在函數中當鉤子使用。
| 事件 | 描述 | 執行個體 |
| slide.bs.carousel | 當調用 slide 執行個體方法時立即觸發該事件。 | $('#identifier').on('slide.bs.carousel', function () { // 執行一些動作...}) |
| slid.bs.carousel | 當輪播完成投影片過渡效果時觸發該事件。 | $('#identifier').on('slid.bs.carousel', function () { // 執行一些動作...}) |
即:切換圖片時會觸發事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
