html + css + js 实现简易轮播图
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner {
position: relative;
width: 200px;
height: 100px;
display: flex;
justify-content: center;
}
.swiper {
width: 200px;
height: 100px;
background-color: #e1e1e1;
position: relative;
overflow: hidden;
}
.swiper-item {
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
display: inline-block;
position: absolute;
display: none;
}
.swiper-item:nth-child(1) {
background-color: pink;
}
.swiper-item:nth-child(2) {
background-color: skyblue;
}
.swiper-item:nth-child(3) {
background-color: silver;
}
.swiper-item:nth-child(4) {
background-color: rgb(255, 251, 192);
}
.active-enter {
animation-name: enterSwiper;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.active-leave {
animation-name: leaveSwiper;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.indicator {
position: absolute;
bottom: 6px;
height: 10px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 2px;
background-color: rgba(0, 0, 0, .1);
}
.active-dot {
background-color: #fff;
}
@keyframes enterSwiper {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes leaveSwiper {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="banner">
<div class="swiper">
<div class="swiper-item" data-index="1">1</div>
<div class="swiper-item" data-index="2">2</div>
<div class="swiper-item" data-index="3">3</div>
<div class="swiper-item" data-index="4">4</div>
</div>
<div class="indicator">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script>
const swiperList = document.querySelector('.swiper')
const swiper = document.querySelectorAll('.swiper-item');
const dots = document.querySelectorAll('.dot')
let timer = null;
let index = 2;
swiper[0].style.display = 'block'
swiper[0].classList.add('active-enter')
dots[0].classList.add('active-dot')
function swiperFn () {
swiper.forEach((item, i) => {
if(index === i + 1) {
item.style.display = 'block'
item.classList.add('active-enter')
dots[i].classList.add('active-dot')
} else {
setTimeout(() => {
item.style.display = 'none'
if(item.classList.contains('active-leave')) {
item.classList.remove('active-leave')
}
}, 1000)
if(item.classList.contains('active-enter')) {
item.classList.replace('active-enter', 'active-leave')
}
if(dots[i].classList.contains('active-dot')) {
dots[i].classList.remove('active-dot')
}
}
})
index += 1
if(index > swiper.length) {
index = 1
}
}
timer = setInterval(() => {
swiperFn()
}, 3000)
swiperList.addEventListener('mouseenter', () => {
clearInterval(timer)
})
swiperList.addEventListener('mouseleave', () => {
timer = setInterval(() => {
swiperFn()
}, 3000)
})
</script>
</body>
</html>
