<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<script src="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*设置轮播图大小*/
div{
width: 400px;
height: 180px;
}
</style>
</head>
<body>
<!--1.轮播图的圆圈部分-->
<!--data-ride = "carousel"自动播放，悬停效果 data-interval='2000'设置播放的秒数-->
<div class="carousel solide" id="box" data-ride = "carousel" data-interval='2000'>
<ol class="carousel-indicators">
<li data-target = "#box" data-slide-to = "0" class="active"></li>
<li data-target = "#box" data-slide-to = "1"></li>
<li data-target = "#box" data-slide-to = "2"></li>
</ol>
<!--2.轮播图的幻灯片-->
<div class="carousel-inner">
<div class="item active">
<img src="../img/批注 2020-06-05 101646.jpg"/>
<div class="carousel-caption"><!--为图片添加文字说明-->
<h4>图一</h4>
</div>
</div>
<div class="item">
<img src="../img/批注 2020-06-05 101707.jpg"/>
<div class="carousel-caption">
<h4>图二</h4>
</div>
</div>
<div class="item">
<img src="../img/批注 2020-06-05 101611.jpg"/>
<div class="carousel-caption">
<h4>图三</h4>
</div>
</div>
</div>
<!--3.轮播图左右按钮-->
<a href="#box" class="left carousel-control" data-slide = "prev" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#box" class="right carousel-control" data-slide = "next" >
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
bootstrap实现轮播图
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。