BootStrap學習(7)_輪播圖

時間 2019-11-13

標籤 bootstrap 學習欄目 Bootstarp 简体版

原文原文鏈接

1、輪播圖

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

若是您想要單獨引用該插件的功能，那麼您須要引用BootStrap中的 carousel.js。html

示例:jquery

1.使用 Bootstrap 輪播（Carousel）插件顯示了一個循環播放元素的通用組件。爲了實現輪播，您只須要添加帶有該標記的代碼便可。不須要使用 data 屬性，只須要簡單的基於 class 的開發便可。bootstrap

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">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
        </div>
</body>
</html>

效果:app

用法:框架

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

選項ide

選項名稱	類型默認值	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 () { // 執行一些動做... })

即:切換圖片時會觸發事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。