首页
所有分类
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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
浅谈vue 单文件探索
Sep 05 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
详解Node.JS模块 process
Aug 31 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
YB217(1) PL660(1) 森海(1) 台湾(1) YB235(1) 直流胆(1) YB400(2) 南麂列岛(1) S2000(3) MX500(1)
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
excellent!――ASCII Art（由目标图象生成ascii）
2007/02/20 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
vue-axios使用详解
2017/05/10 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
用Python解决x的n次方问题
2019/02/08 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
怀旧收藏品和经典纪念品：Betty’s Attic
2018/08/29 全球购物
SQL数据库笔试题
2016/03/08 面试题
医学类导师推荐信范文
2013/11/19 职场文书
生产文员岗位职责
2014/04/05 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js