开发者学堂课程【移动 Web 前端开发：轮播图-结构分析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8456
轮播图-结构分析
目录：
一、 轮播图结构
二、 实际效果
一、轮播图结构<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>container</title>
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<! --[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
< ! [ endif]-->
</ head>
<body>
<! -- carousel这是轮播图模块-->
<! -- slide控制是否有动画-->
<!-- data-ride="carousel”申明是一个轮播图组件-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel”>
<!--点盒子-->
<! -- Indicators -->
<ol class="carousel-indicators">
<! --
data-target="#carousel-example-generic”控制那个轮播图
data-slide-to="0”控制轮播图索引为0的图片盒子
class=”active”当前对应的点
-->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!--图片盒子-->
<div class="carousel-inner" >
<!--图片-->
<div class="item active">
<img src="../images/slide_01_2000×410.jpg">
</div>
<div class="item">
<img src="../images/slide_02_2000×410.jpg">
</div>
<div class="item">
<img src="../images/slide_03_2000×410.jpg">
</div>
<div class="item">
<img src="../images/slide_04_2000×410.jpg">
</div>
</div>
<!--控制-->
<!--上一张-->
<!—data-slide=”prev” 切换上一张-->
<a class="left carousel-control" href="#carousel-example-generic" data-slide=”prev”>
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!--下一张-->
<!--data-slide=”next” 切换到下一张-->
<a class="right carousel-control" href="#carousel-example-generic" data-slide=”next”>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="../lib/jquery/jquery.min.js "></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
二、实际效果
切换效果如图
