首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap每天必学之轮播（Carousel）插件

Posted in Javascript onApril 25, 2016

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

结果如下所示：

Bootstrap每天必学之轮播（Carousel）插件

简单的轮播（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">‹</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">›</a>
</div>
 
 
</body>
</html>

结果如下所示：

Bootstrap每天必学之轮播（Carousel）插件

轮播（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 来传递的。下表列出了这些选项：

Bootstrap每天必学之轮播（Carousel）插件

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

Bootstrap每天必学之轮播（Carousel）插件

Bootstrap每天必学之轮播（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">‹</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">›</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>

结果如下所示：

Bootstrap每天必学之轮播（Carousel）插件

轮播（Carousel）插件方法

七、事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

Bootstrap每天必学之轮播（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">‹</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">›</a>
</div>
<script>
 $(function(){
 $('#myCarousel').on('slide.bs.carousel', function () {
 alert("当调用 slide 实例方法时立即触发该事件。");
 });
 });
</script>
 
</body>
</html>

结果如下所示：

Bootstrap每天必学之轮播（Carousel）插件

轮播（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="第一张">
 </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">‹</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a>
</div>

data 属性解释：

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

Bootstrap每天必学之轮播（Carousel）插件

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

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

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

Bootstrap每天必学之轮播（Carousel）插件

//点击按钮执行

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

Bootstrap每天必学之轮播（Carousel）插件

事件

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

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

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

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

Bootstrap每天必学之轮播（Carousel）插件

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
浅析vue-router原理
Oct 19 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航（Affix）插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍（全）
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析（实现原理、算法性能、适用场合）
Apr 25 #Javascript
vuex(1) 本地化存储(1) Storage(1) Set接口(1) OutputStream(1) HashSet集合(1) Vue(10) 自定义组件(1) persistedstate(1) click(1)
You might like
golang 调用 php7详解及实例
2017/01/04 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
javascript定义函数的方法
2010/12/06 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python 私有函数的实例详解
2017/09/11 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
斯凯奇澳大利亚官网：SKECHERS澳大利亚
2018/03/31 全球购物
荷兰手表网站：Watch2Day
2018/07/02 全球购物
宣传工作经验材料
2014/06/02 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
新学期主题班会
2015/08/17 职场文书
党风廉政建设心得体会（2016最新版）
2016/01/22 职场文书
导游词之桂林
2019/08/20 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python