bootstrap carousel实现
问题：轮播效果不出现
解决方法： 在在最外层div中添加此属性 data-ride="carousel"
用js方法实现轮播 $(function () { $('#myCarousel').carousel({ interval: 2000 }); })
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
.carousel{
overflow: hidden;
position: relative;
top: 80px;
}
.carousel-indicators{
display: none;
}
.carousel-control{
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,2,0);
top: 50%;
left: 0px;
opacity: 0.8;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 50px;
width: 90px;
margin-top: 150px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.carousel-control.right{
right: 0px;
background: transparent url(image/right.png) no-repeat right top;
}
.carousel-control.left{
left: 0px;
background: transparent url(image/left.png) no-repeat left top;
}
.carousel-control.left:hover{
left: 50px;
background: transparent url(image/left.png) no-repeat left top;
}
.carousel-control.right:hover{
right: 50px;
display: inline-block;
background: transparent url(image/right.png) no-repeat right top;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/banner01.jpg" height="426" width="1920"/>
</div>
<div class="item">
<img src="image/banner02.jpg" height="426" width="1920"/>
</div>
<div class="item">
<img src="image/banner03.jpg" height="426" width="1920"/>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
