摘要:<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<title>Carousel / 轮播插件/跑马灯/旋转木马</title>
</head>
<body>
<!--1.创建轮播图的容器-->
<!--基类:carousel, 触发方式: data-ride="carousel"-->
<div id="slider" class="carousel slide" data-ride="carousel">
<!--2.设置轮播图的播放顺序-->
<ol >
<li data-target="#slider" data-slide-to="0"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<!--3.设置轮播的图片-->
<div>
<!--每张图添加.item, 并设置第一张为当前激活状态.active-->
<div class="item active">
<img src="1.jpg" alt="">
<div>国庆去哪玩?</div>
</div>
<div>
<img src="2.jpg" alt="">
<div>最新款的鞋子</div>
</div>
<div>
<img src="3.jpg" alt="">
<div>天猫促销中...</div>
</div>
</div>
<!--4.设置轮播图的播放-->
<!--data-slide="prev":点击后向前播放-->
<a href="#slider" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#slider" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>
批改老师:查无此人批改时间:2019-02-20 09:07:52
老师总结:完成的不错,<img src="1.jpg" alt=""> 里的 alt也加上文字,标准的html5,继续加油。