html + css + js 实现简易轮播图

新时代农民工Top

已于 2024-06-18 11:29:06 修改

阅读量1.1k

点赞数 25

文章标签： css html javascript

于 2024-06-17 16:07:25 首次发布

本文链接：https://blog.csdn.net/web00_11/article/details/139746857

版权

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>