首页
所有分类
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 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 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
NASA(1) 数据(1) 富碳陨石(1) 毅力号(1) 嘧啶碱基(2) 陨石(1) 火星(2) 大脑(1) 美国航天局(1) RNA(2)
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php的memcached客户端memcached
2011/06/14 PHP
基于laravel制作APP接口（API）
2016/03/15 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
xmlplus组件设计系列之网格（DataGrid）(10）
2017/05/05 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python记录程序运行时间的三种方法
2017/07/14 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python随机数分布random均匀分布实例
2019/11/27 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
餐饮投资计划书
2014/04/25 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
民间借贷借条如何写
2015/05/26 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Oracle中update和select 关联操作
2022/01/18 Oracle