<!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刪除。