Bootstrap轮播图
2022-03-27 本文已影响0人
马佳乐
- 轮播图需要三个
<div></div> - 最外层div里需要
.carousel，中间层div需要.carousel-inner，最里层div需要.carousel-item - 接着最里面可插入图片，对第一张设置
.active，否则轮播将不可见 -
.slide实现图片滑动效果 - 添加上一个和下一个控件，用
<a></a>标签或<Button></Button>标签 - 可添加具体指向某一张图片的控件，用
<ol></ol>标签，里面添加<li></li>标签 - 可以在图片下方设置显示的字幕
- 通过 JavaScript，手动调用轮播：
$('.carousel').carousel() -
$('.carousel').carousel({ interval: 2000 })设置轮播时间 -
.carousel('cycle')从左到右循环浏览轮播项目 -
.carousel('pause')阻止轮播在项目之间循环播放。
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title></title>
<style>
body {
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!--点击切换到具体某一图片-->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner text-center ">
<div class="carousel-item active ">
<img src="img/1.jpg" />
<div class="carousel-caption d-none d-md-block text-warning">
<!--字幕-->
<h5>第一张</h5>
<p>一共有五张</p>
</div>
</div>
<div class="carousel-item">
<img src="img/2.jpg" />
<div class="carousel-caption d-none d-md-block text-warning">
<h5>第二张</h5>
<p>一共有五张</p>
</div>
</div>
<div class="carousel-item">
<img src="img/3.jpg" />
<div class="carousel-caption d-none d-md-block text-warning">
<h5>第三张</h5>
<p>一共有五张</p>
</div>
</div>
<div class="carousel-item">
<img src="img/4.jpg" />
<div class="carousel-caption d-none d-md-block text-warning">
<h5>第四张</h5>
<p>一共有五张</p>
</div>
</div>
<div class="carousel-item">
<img src="img/5.jpg" />
<div class="carousel-caption d-none d-md-block text-warning">
<h5>第五张</h5>
<p>一共有五张</p>
</div>
</div>
</div>
</div>
<!--添加上一个和下一个控件-->
<!--<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>-->
<button class="carousel-control-prev" type="button" data-target="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
<br />
<div class="text-center">
<button id="btn1" class="btn btn-success">暂停</button>
<button id="btn2" class="btn btn-success">继续</button>
</div>
<!--引入JavaScript和jQuery-->
<!--jQuery第一个，然后Bootstrap （集成了 Popper.js和Bootstrap.js）-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
<script>
$(function() {
$(".carousel").carousel({
interval: 1000
})
$("#btn1").click(function() {
$(".carousel").carousel('pause')
});
$("#btn2").click(function() {
$(".carousel").carousel('cycle')
});
});
</script>
