<!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>Document</title>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 500px;
height:300px;
margin: 10px auto;
overflow: hidden;
position:relative
}
.carousel{
width: 100%;
height: 100%;
display: flex;
transition: 0.5s;
}
.container .carousel img{
width: 500px;
height: 300px;
}
.indicator{
position: absolute;
bottom:10px;
display: flex;
/* outline: 1px solid #fff; */
left:50%;
transform: translateX(-50%);
}
.indicator span{
width: 20px;
height: 20px;
border:2px solid #ccc;
border-radius: 50%;
margin:0 3px;
}
.indicator span.active{
background-color: #fff;
border-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel">
<div class="item">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff81b5f29bd1681c0a2c6df883d14d38.jpg" alt="">
</a>
</div>
<div class="item">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b996f91f354815eb138d63f2e7e9391.jpg" alt="">
</a>
</div>
<div class="item">
<a href="">
<img src="" alt="">
</a>
</div>
<div class="item">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="indicator">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var doms={
carousel:document.querySelector('.carousel'),
indicators:document.querySelectorAll('.indicator span')
};
function moveto(index){
doms.carousel.style.transform=`translateX(-${index}00%)`
//去除当前选中的指示器s
var active =document.querySelector('.indicator span.active')
active.classList.remove('active')
//重新设置要选中的指示器
doms.indicators[index].classList.add('active')
}
doms.indicators.forEach(function(item ,index){
item.onclick=function(){
moveto(index)
}
})
</script>
</body>
</html>
简单轮播图
最新推荐文章于 2024-08-24 11:46:12 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)