使用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 相关文章推荐
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
javascript关于继承解析
May 10 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
JavaScript中的Proxy对象
Nov 27 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通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js函数调用的方式
2014/05/06 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python中协程用法代码详解
2018/02/10 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
ajax是什么及其工作原理
2012/02/08 面试题
2014春晚主持词
2014/03/25 职场文书
房屋转让协议书范本
2014/04/11 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
小学运动会开幕词
2015/01/28 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
三行辞职书范文
2015/02/26 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS