使用BootStrap进行轮播图的制作


Posted in Javascript onJanuary 06, 2017

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>轮播图</title> 
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<style> 
  .carousel { 
    height: 500px; 
  } 
  .carousel .item { 
    height: 500px; 
  } 
  .carousel .item img { 
    width: 100%; 
  } 
</style> 
<body> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators轮播指标 --> 
  <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
  </ol> 
  <!-- Wrapper for slides 轮播项目--> 
  <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
      <img src="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="..."> 
      <div class="carousel-caption"> 
        11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。 
      </div> 
    </div> 
    <div class="item"> 
      <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="..."> 
      <div class="carousel-caption"> 
        无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。 
      </div> 
    </div> 
    <div class="item"> 
      <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="..."> 
      <div class="carousel-caption"> 
        有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。 
      </div> 
    </div> 
  </div> 
  <!-- Controls --> 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body> 
</html>

以上所述是小编给大家介绍的使用BootStrap进行轮播图的制作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
浅谈Express异步进化史
Sep 09 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
BootStrap便签页的简单应用
Jan 06 #Javascript
bootstrap table实例详解
Jan 06 #Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
You might like
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
javascript数组排序汇总
2015/07/07 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python subprocess库的使用详解
2018/10/26 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
行政部总经理岗位职责
2014/01/04 职场文书
生日宴会主持词
2014/03/20 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
委托公证书样本
2015/01/23 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
公司管理制度范本
2015/08/03 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python