使用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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
全面理解闭包机制
Jul 11 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php中this关键字用法分析
2016/12/07 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python中xrange用法分析
2015/04/15 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python实现注册、登录小程序功能
2018/09/21 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python drf各类组件的用法和作用
2021/01/12 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
学徒工职责
2014/03/06 职场文书
质量承诺书范文
2014/03/27 职场文书
保险内勤岗位职责
2014/04/05 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
新郎接新娘保证书
2015/05/08 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
公司财务管理制度
2015/08/04 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL