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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
js 操作符汇总
Nov 08 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python Requests安装与简单运用
2016/04/07 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
聊聊Python中的pypy
2018/01/12 Python
Python异常的检测和处理方法
2018/10/26 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python 两个数据库postgresql对比
2019/10/21 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python三引号如何输入
2020/07/06 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
企业宣传工作方案
2014/06/02 职场文书
婚庆答谢词
2015/01/04 职场文书