轮播Carousel
一、Carousel介绍
-
轮播（carousel）是一种动态切换内容的一种形式，很多网站都有这个功能；
-
可以节省空间，效果也非常出彩
-
class="carousel slide"
-
class="carousel-inner"
-
class="carousel-indicators"
-
class="carousel-control"
-
js调用：$('.carousel').carousel({interval: 1000}) // jQuery的知识，后面系类课程会讲，1000是毫秒，也就是1秒
二、代码实战
代码的详细解读，可以参考视频教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./res/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;">
<h1>轮播Carousel</h1>
<div id="myCard" class="carousel slide" style="width:60%">
<!--轮播指示-->
<ol class="carousel-indicators">
<li data-target="#myCard" data-slide-to="0" ></li>
<li data-target="#myCard" data-slide-to="1" class="active"></li>
<li data-target="#myCard" data-slide-to="2"></li>
</ol>
<!--轮播图片区-->
<div class="carousel-inner">
<div class="item">
<img src="./images/1.jpg" style="width: 100%">
</div>
<div class="item active">
<img src="./images/2.jpg" style="width: 100%">
</div>
<div class="item">
<img src="./images/3.jpg" style="width: 100%">
</div>
</div>
<!--轮播控制区-->
<a class="left carousel-control" href="#myCard" role="button" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCard" role="button" data-slide="next" >
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
<script type="text/javascript">
$('#myCard').carousel({interval: 1000})
</script>
</body>
</html>