首页
所有分类
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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
Bootstrap模态框（Modal）实现过渡效果
Mar 17 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
瑞典购物网站(55) 阿根廷购物网站(9) 法国购物网站(144) 比利时购物网站(33) 意大利购物网站(128) 肯尼亚购物网站(2) 丹麦购物网站(22) 台湾购物网站(77) 澳大利亚购物网站(309) 挪威购物网站(7)
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
javascript的几种写法总结
2016/09/30 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
vue.js实现h5机器人聊天（测试版）
2020/07/16 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
详解Python在七牛云平台的应用（一）
2017/12/05 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
The North Face北面荷兰官网：美国著名户外品牌
2019/10/16 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
区域总监的岗位职责
2013/11/21 职场文书
大学四年规划书范文
2013/12/27 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
《云房子》教学反思
2014/04/20 职场文书
党的群众路线教育实践活动对照检查材料（个人）
2014/09/24 职场文书
个人事迹材料范文
2014/12/29 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书