<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
.img-big{
width: 400px;
height: 300px;
border: 4px solid rgb(60, 102, 156);
margin: 0 auto;
}
.img-sim{
width: 400px;
height: 300px;
display: none;
}
.img-block{
display: block;
}
</style>
</head>
<body>
<div class="img-big">
<img src="img/img01.webp" alt="1" class="img-sim img-block">
<img src="img/img02.webp" alt="2" class="img-sim">
<img src="img/img03.webp" alt="3" class="img-sim">
</div>
</body>
<script>
var index = 0;
// 定时器
setInterval(function(){
index++;
var small_img = document.getElementsByClassName('img-sim')
//判断index值是否过多
if (index >= small_img.length) index = 0
//循环遍历每个图片 使其隐藏
for (const n of small_img) {
n.style.display = 'none'
}
//给index位置上的图片 使其显示
small_img[index].style.display = 'block'
//时间
},1000)
</script>
</html>
HTML--简单的轮播图
最新推荐文章于 2024-05-28 19:26:08 发布