首页
所有分类
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和json从后台获得数据集的代码
Nov 07 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
JavaScript使用DeviceOne开发实战（二） 生成调试安装包
Dec 01 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）
Oct 27 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 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
存储过程(3) 抖音(1) binlog(2) MIME(1) 优化(1) 增删改查(2) 写入策略(1) instantclient(1) B+树(2) redo log(1)
You might like
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
Javascript定义类（class）的三种方法详解
2015/03/13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
用python写扫雷游戏实例代码分享
2018/05/27 Python
python使用Matplotlib画饼图
2018/09/25 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python实现淘宝购物系统
2019/10/25 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
机电专业大学生求职信
2013/10/04 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
简单租房协议书
2014/04/09 职场文书
安全生产责任书范本
2014/04/15 职场文书
无传销社区工作方案
2014/05/13 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python中如何处理常见报错
2022/01/18 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL