使用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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
深入理解js中的加载事件
Feb 08 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 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防注入漏洞过滤函数代码
2012/04/11 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
js简单时间比较的方法
2016/08/02 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Python os模块介绍
2014/11/30 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python中property函数用法实例分析
2018/06/04 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
对python中list的五种查找方法说明
2020/07/13 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
护士求职推荐信范文
2013/11/23 职场文书
《口技》教学反思
2014/02/21 职场文书
任命书范本大全
2014/06/06 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
离婚上诉状范文
2015/05/23 职场文书
golang中的空slice案例
2021/04/27 Golang
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
python双向链表实例详解
2022/05/25 Python