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控制表格隔行变色
Jun 26 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
Prototype Date对象 学习
Jul 12 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
js实现select下拉框菜单
Dec 08 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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函数
2010/01/11 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
使用python Django做网页
2013/11/04 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
物业管理求职自荐信
2013/09/25 职场文书
护士自荐信范文
2013/12/15 职场文书
机电一体化职业规划书
2014/01/07 职场文书
大学生读书笔记范文
2015/07/01 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
Mysql 一主多从的部署
2022/05/20 MySQL