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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
js new Date()实例测试
Oct 31 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
vue动态绑定style样式
Apr 20 Vue.js
详解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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
详解python中的 is 操作符
2017/12/26 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
机械电子工程专业推荐信范文
2013/11/20 职场文书
一年级语文教学反思
2014/02/13 职场文书
海洋科学专业求职信
2014/08/10 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server