欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap基本插件學習筆記之輪播幻燈片(23)

 更新時間：2016年12月08日 08:33:04   作者：kikay  
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之輪播幻燈片的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。

0x01 基本實例

Bootstrap實現(xiàn)輪播幻燈片的效果，只需要簡單地使用class開發(fā)就可以了：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>輪播幻燈片</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻燈片切換指標-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻燈片項目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="項目1">
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="項目2">
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="項目3">
  </div>
 </div>
 <!--幻燈片導航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
 </div>
</div>
</body>
</html>

效果如下：

幾點說明：

（1）屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置。
（2）使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數(shù)。
（3）data-ride="carousel" 屬性用于標記輪播在頁面加載時就開始動畫播放。

0x02 添加標題

可以通過.item內(nèi)的.carousel-caption 元素向幻燈片添加標題：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>添加標題</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻燈片切換指標-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻燈片項目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="項目1">
  <div class="carousel-caption">標題1</div>
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="項目2">
  <div class="carousel-caption">標題2</div>
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="項目3">
  <div class="carousel-caption">標題3</div>
  </div>
 </div>
 <!--幻燈片導航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
 </div>
</div>
</body>
</html>

效果如下：

0x03 JS切換

還可以利用JS來實現(xiàn)幻燈片的切換。下面添加一些按鈕來實現(xiàn)幻燈片的控制：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>JS切換</title>
</head>
<body>
<div class="container col-md-6 col-md-offset-3">
 <div id="myCarouel" class="carousel slide">
 <!--幻燈片切換指標-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻燈片項目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="項目1">
  <div class="carousel-caption">標題1</div>
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="項目2">
  <div class="carousel-caption">標題2</div>
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="項目3">
  <div class="carousel-caption">標題3</div>
  </div>
 </div>
 <!--幻燈片導航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
 <!--控制按鈕-->
 <div style="text-align: center">
  <button type="button" class="btn start-slide">開始切換</button>
  <button type="button" class="btn pause-slide">終止切換</button>
  <button type="button" class="btn prev-slide">前一個幻燈</button>
  <button type="button" class="btn next-slide">后一個幻燈</button>
  <button type="button" class="btn slide-1">幻燈1</button>
  <button type="button" class="btn slide-2">幻燈2</button>
  <button type="button" class="btn slide-3">幻燈3</button>
 </div>
 </div>
</div>
<script>
 $(function () {
 //啟動輪播
 $(".start-slide").click(function () {
  $("#myCarouel").carousel('cycle');
 })
 //終止輪播
 $(".pause-slide").click(function () {
  $("#myCarouel").carousel('pause');
 })
 //前一個幻燈
 $(".prev-slide").click(function () {
  $("#myCarouel").carousel('prev');
 })
 //下一個幻燈
 $(".next-slide").click(function () {
  $("#myCarouel").carousel('next');
 })
 //切換到指定的幻燈
 $(".slide-1").click(function () {
  $("#mycarouel").carousel(0);
 })
 $(".slide-2").click(function () {
  $("#mycarouel").carousel(1);
 })
 $(".slide-3").click(function () {
  $("#mycarouel").carousel(2);
 })
 })
</script>
</body>
</html>

效果如下：

0x04 事件

同樣地，Carousel也定義了一些事件：

（1）slide.bs.carousel
當調(diào)用 slide 實例方法時立即觸發(fā)該事件：

$('#mycarouel').on('slide.bs.carousel', function () {
 // 執(zhí)行一些動作...
})

（2）slid.bs.carousel
當輪播完成幻燈片過渡效果時觸發(fā)該事件：

$('#mycarouel').on('slid.bs.carousel', function () {
 // 執(zhí)行一些動作...
})

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>事件</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻燈片切換指標-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻燈片項目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="項目1">
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="項目2">
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="項目3">
  </div>
 </div>
 <!--幻燈片導航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
 </div>
</div>
<script>
 $(function () {
 $("#myCarouel").on('slide.bs.carousel',function () {
  alert('切換幻燈');
 });
 })
</script>
</body>
</html>

效果如下：

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論