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 += 1if(index > swiper.length) {index = 1}}// 轮播图通过定时器轮播timer = setInterval(() => {swiperFn()}, 3000)// 鼠标进入停止轮播swiperList.addEventListener('mouseenter', () => {clearInterval(timer)})// 鼠标离开继续轮播swiperList.addEventListener('mouseleave', () => {timer = setInterval(() => {swiperFn()}, 3000)})</script>
</body>
</html>