社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > Bootstrap每天必學之輪播（Carousel）插件_javascript技巧

Bootstrap每天必學之輪播（Carousel）插件_javascript技巧

WBOY
發布： 2016-05-16 15:03:57
原創
1700 人瀏覽過

Bootstrap 輪播插件是一種靈活的響應式的向網站添加滑桿的方式。除此之外，內容也是足夠靈活的，可以是影像、內嵌框架、影片或其他您想要放置的任何類型的內容。

如果您想要單獨引用該外掛程式的功能，那麼您需要引用 carousel.js。或者，正如 Bootstrap 外掛程式概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

一、實例
下面是一個簡單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個循環播放元素的通用組件。為了實現輪播，您只需要添加帶有該標記的程式碼。不需要使用 data 屬性，只需要簡單的基於 class 的開發即可。 

<!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="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/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="/media/uploads/2014/07/slide1.png" alt="First slide">
 <div class="carousel-caption">标题 1</div>
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 <div class="carousel-caption">标题 2</div>
 </div>
 <div class="item">
 <img src="/media/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 來傳遞的。下表列出了這些選項：

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

六、實例
下面的實例示範了方法的用法：

<!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="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/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');
 });
 // 循环轮播到上一个项目
 $(".prev-slide").click(function(){
 $("#myCarousel").carousel('prev');
 });
 // 循环轮播到下一个项目
 $(".next-slide").click(function(){
 $("#myCarousel").carousel('next');
 });
 // 循环轮播到某个特定的帧
 $(".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）插件中要用到的事件。這些事件可在函數中當鉤子使用。

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

<!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="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/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 实例方法时立即触发该事件。");
 });
 });
</script>
 
</body>
</html>
登入後複製

結果如下圖：

輪播（Carousel）外掛事件

根據上面的教學自己製作的實例：

輪播插件就是將幾張同等大小的大圖，依照順序依序播放。 

//基本实例。

<div id="myCarousel" class="carousel slide">
 <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>
 <div class="carousel-inner">
 <div class="item active">
 <img src="img/slide1.png" alt="Bootstrap每天必學之輪播（Carousel）插件_javascript技巧">
 </div>
 <div class="item">
 <img src="img/slide2.png" alt="第二张">
 </div>
 <div class="item">
 <img src="img/slide3.png" alt="第三张">
 </div>
 </div>

 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a>
</div>
登入後複製

data 属性解释：

1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
2.data-slide-to 来向轮播底部创建一个原始滑动索引， data-slide-to="2"将把滑动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；
//设置自定义属性

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 2000,
 //设置暂停按钮的事件
 pause : 'hover',
 //只播一次
 wrap : false,
});
登入後複製

轮播插件还提供了一些方法，如下：

//点击按钮执行

$('button').on('click', function() {
 //点击后，自动播放
 $('#myCarousel').carousel('cycle');
 //其他雷同
});
登入後複製

事件

$('#myCarousel').on('slide.bs.carousel', function() {
 alert('当调用 slide 实例方式时立即触发');
});

$('#myCarousel').on('slid.bs.carousel', function() {
 alert('当轮播完成一个幻灯片触发');
});
登入後複製

更多内容可以参考：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习Bootstrap轮播（Carousel）插件有所帮助。

相關標籤：
Bootstrap轮播（Carousel）插件 Bootstrap轮播插件 Bootstrap轮播 Bootstrap插
來源：php.cn
上一篇：第二章之Bootstrap 頁面排版樣式_javascript技巧 下一篇：Bootstrap網格系統詳解_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2061
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2216
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1872
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1753
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1779
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板