Bootstrap基本插件學習筆記之輪播幻燈片(23)
編輯：關於JavaScript
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。
0x01 基本實例
Bootstrap實現輪播幻燈片的效果，只需要簡單地使用class開發就可以了：
<!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"><<<</a> <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a> </div> </div> </body> </html>
效果如下：
幾點說明：
（1）屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
（2）使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
（3）data-ride="carousel" 屬性用於標記輪播在頁面加載時就開始動畫播放。
0x02 添加標題
可以通過.item內的.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"><<<</a> <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a> </div> </div> </body> </html>
效果如下：
0x03 JS切換
還可以利用JS來實現幻燈片的切換。下面添加一些按鈕來實現幻燈片的控制：
<!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"><<<</a>
<a class="carousel-control right" href="#myCarouel" data-slide="next">>>></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
當調用 slide 實例方法時立即觸發該事件：
$('#mycarouel').on('slide.bs.carousel', function () {
// 執行一些動作...
})
（2）slid.bs.carousel
當輪播完成幻燈片過渡效果時觸發該事件：
$('#mycarouel').on('slid.bs.carousel', function () {
// 執行一些動作...
})
看下面的例子：
<!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"><<<</a>
<a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a>
</div>
</div>
<script>
$(function () {
$("#myCarouel").on('slide.bs.carousel',function () {
alert('切換幻燈');
});
})
</script>
</body>
</html>
效果如下：
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦