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

Bootstrap基本插件学习笔记之轮播幻灯片(23)

Posted in Javascript onDecember 08, 2016

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>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

几点说明：

（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>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

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>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

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>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本插件学习笔记之轮播幻灯片(23)

- Author -

kikay

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

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
获取select的value、text值的简单示例（jquery与javascript）
Dec 07 #Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 #Javascript
DropDownList实现可输入可选择（两种版本可选）
Dec 07 #Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 #Javascript
利用jquery实现验证输入的是否是数字、小数，包含保留几位小数
Dec 07 #Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 #Javascript
win10(43) 对讲机(1) R71E(1) GTX1660(1) i7 6700(1) React(6) i5 9400(1) R72E(1) ICOM(2) DE1102(1)
You might like
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
js实现图片360度旋转
2017/01/22 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
浅谈js中的this问题
2017/08/31 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
python装饰器decorator介绍
2014/11/21 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python编程使用协程并发的优缺点
2018/09/20 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
美国复古街头服饰精品店：Need Supply Co.
2017/02/22 全球购物
美国独家设计师眼镜在线光学商店：Glasses Gallery
2017/12/28 全球购物
网游商务专员求职信
2013/10/15 职场文书
社区包粽子活动方案
2014/01/21 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Python进程间的通信之语法学习
2022/04/11 Python
nginx七层负载均衡配置详解
2022/07/15 Servers