项目-轮播图
2018-10-31 本文已影响0人
子却
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>轮播展示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="./css.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center">轮播展示</h2>
<!--1.class="carousel slide" 是必须要加的属性，告诉浏览器这里要用轮播图特效；
2.data-ride="carousel" 用于标记轮播在页面加载时就开始动画播放-->
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!--ol列表用于制作控制器,每个<li>是控制图片的圆点，注意它们要指向激活轮播的元素，即data-target指向data-ride所在元素的id。-->
<ol class="carousel-indicators">
<!--data-slide-to用于切换到指定索引值的图片，图片的索引值从“0”开始-->
<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>
<!--轮播项目-->
<!--1.carousel-inner是包裹所有轮播项的盒子，必须设置；
2.每一个.item就是单个轮播项目-->
<div class="carousel-inner">
<div class="item active">
<img src="https://static1.bcjiaoyu.com/f49febe723ba79c384a71a62e3571f2d_o.png-1200x800" alt="First">
<!--<div class="carousel-caption">标题 1</div>
.carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化.-->
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/519a8173d4933b4344c667cd389fd6ae_j.png-1200x800" alt="Second">
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/770b3bd613dacfbeb225474068497adc_d.png-1200x800" alt="Third">
</div>
</div>
<!--轮播导航-->
<!--1.用<a>标签的超链接实现点击切换，同样链接指向启用轮播的元素;
2.carousel-control类用于显示箭头并调用点击切换图片的功能；
3.a链接的href属性必须指向需要控制的轮播图ID.
4.“data-slide”属性设置轮播图滑动方向，“prev”指上一个，"next"指下一个；
5.glyphicon-chevron-left类用于显示箭头，不影响箭头的切换功能。
6.aria-*功能是用来支持读屏设备的，方便残障人士使用-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</body>
整个轮播图分为三部分：轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多，一个简单的类名就可以实现一个甚至多个js函数才能办到的功能。但相对的，记忆的东西较js多得多，需要时常巩固。
