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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
小程序新版订阅消息模板消息
Dec 31 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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
Pytorch to(device)用法
2020/01/08 Python
python实现图像拼接功能
2020/03/23 Python
如何利用find命令查找文件
2016/11/18 面试题
会计专业毕业生自荐信范文
2013/12/20 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
三年级小学生评语
2014/04/22 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python