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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
详解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中截取中文字符串的代码小结
2011/07/17 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python asyncio 协程库的使用
2021/01/21 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
小班重阳节活动方案
2014/02/08 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2014年班组工作总结
2014/11/20 职场文书
社会实践活动总结
2015/02/05 职场文书
郭明义电影观后感
2015/06/08 职场文书
MySQL触发器的使用
2021/05/24 MySQL
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers