Bootstrap学习笔记 轮播(Carousel)插件


Posted in Javascript onMarch 21, 2017

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果您想要单独引用该插件的功能,那么您需要引用 carousel.js,或者bootstrap.js 或压缩版的 bootstrap.min.js。

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Bootstrap 轮播(Carousel)插件</title> 
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/carousel.css" rel="external nofollow" > 
 <script src="js/jquery.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
 </head> 
 <body> 
 <!-- Carousel 
 ================================================== --> 
 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 <!-- Indicators --> 
 <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" role="listbox"> 
 <div class="item active"> 
 <img class="first-slide" src="http://localhost:8020/BootStrap/img/slide1.png" alt="First slide"> 
 <div class="container"> 
 <div class="carousel-caption"> 
 <h1>Example headline.</h1> 
 <p> 
 Note: If you're viewing this page via a <code> 
  file://</code> 
 URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules. 
 </p> 
 <p> 
 <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Sign up today</a> 
 </p> 
 </div> 
 </div> 
 </div> 
 <div class="item"> 
 <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
 <div class="container"> 
 <div class="carousel-caption"> 
 <h1>Another example headline.</h1> 
 <p> 
 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
 </p> 
 <p> 
 <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Learn more</a> 
 </p> 
 </div> 
 </div> 
 </div> 
 <div class="item"> 
 <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
 <div class="container"> 
 <div class="carousel-caption"> 
 <h1>One more for good measure.</h1> 
 <p> 
 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
 </p> 
 <p> 
 <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Browse gallery</a> 
 </p> 
 </div> 
 </div> 
 </div> 
 </div> 
 <!--左前进右后退--> 
 <a class="left carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev"> 
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 <span class="sr-only">Previous</span> 
 </a> 
 <a class="right carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="next"> 
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 <span class="sr-only">Next</span> 
 </a> 
 </div> 
 <!-- /.carousel --> 
 </body> 
</html>

注意:

<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">

  data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

效果图

Bootstrap学习笔记 轮播(Carousel)插件

bootstrap组件专题大家可以参考下:

以上所述是小编给大家介绍的Bootstrap学习笔记 轮播(Carousel)插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
DOM 事件流详解
Jan 20 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
js实现简易计算器功能
Oct 18 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 #Javascript
node安装--linux下的快速安装教程
Mar 21 #Javascript
Vue 单文件中的数据传递示例
Mar 21 #Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 #Javascript
详解Vue 实例中的生命周期钩子
Mar 21 #Javascript
十大热门的JavaScript框架和库
Mar 21 #Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 #Javascript
You might like
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
简单了解什么是神经网络
2017/12/23 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python实现视频分帧效果
2019/05/31 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
师范生自荐信范文
2013/10/06 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
餐饮加盟计划书
2014/01/10 职场文书
小学新教师培训方案
2014/02/03 职场文书
社区活动策划方案
2014/08/21 职场文书
滞留工资返还协议书
2014/10/19 职场文书
国庆阅兵观后感
2015/06/15 职场文书
交通处罚决定书
2015/06/24 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python