JS 原生手写轮播图-蒲公英云

JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化

实现了以下功能

(1) 点击容器container下方小圆点可以进行切换

(2) 点击左右的按钮可以进行切换

(3) 自动轮播图片

(4) 鼠标放上去暂停定时器，鼠标移出重新开启定时器

具体代码实现如下：

<!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>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            body {
                margin: 300px;
            }
            .container {
                width: 600px;
                height: 300px;
                position: relative;
            }
            .content-list {
                width: 600px;
                height: 300px;
                position: relative;
                transition: all 0.9s;
            }
            .item {
                width: 100%;
                height: 100%;
                list-style: none;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
            }
            .item:nth-child(1) {
                background-color: red;
            }
            .item:nth-child(2) {
                background-color: green;
            }
            .item:nth-child(3) {
                background-color: blue;
            }
            .item:nth-child(4) {
                background-color: black;
            }
            .active {
                opacity: 1;
            }
            .order {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                display: flex;
            }
            .item1 {
                width: 20px;
                height: 20px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: white;
                list-style: none;
            }
            .item1Active {
                background: purple;
            }
            button {
                width: 20px;
                height: 30px;
            }
            .showBtn {
                display: block;
            }
            .hideBtn {
                display: none;
            }
            #leftBtn {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
            #rightBtn {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <ul class="content-list">
                <li class="item active"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
            <ul class="order">
                <li class="item1 item1Active">1</li>
                <li class="item1">2</li>
                <li class="item1">3</li>
                <li class="item1">4</li>
            </ul>
            <button id="leftBtn" class="hideBtn"><</button>
            <button id="rightBtn" class="hideBtn">></button>
        </div>
        <script>
            let container = document.querySelector('.container');
            let items = document.querySelectorAll('.item');
            let item1s = document.querySelectorAll('.item1');
            let leftBtn = document.querySelector('#leftBtn');
            let rightBtn = document.querySelector('#rightBtn');
            // 当前索引index
            let index = 0;
            function changeIndex() {
                for (let i = 0; i < items.length; i++) {
                    items[i].classList.remove('active');
                    item1s[i].classList.remove('item1Active');
                }
                items[index].classList.add('active');
                item1s[index].classList.add('item1Active');
            }
            function goLeft() {
                if (index > 0) {
                    index--;
                } else {
                    index = 3;
                }
                changeIndex();
            }
            function goRight() {
                if (index < 3) {
                    index++;
                } else {
                    index = 0;
                }
                changeIndex();
            }
            // 给左按钮和右按钮绑定点击事件,达到轮播图切换的效果
            leftBtn.addEventListener('click', goLeft);
            rightBtn.addEventListener('click', goRight);
            // 给底部小圆点增加自定义属性index,标记为索引,方便为小圆点绑定点击事件
            for (let i = 0; i < item1s.length; i++) {
                item1s[i].addEventListener('click', function () {
                    index = i;
                    changeIndex();
                });
            }
            // 声明定时器，达到轮播图自动向后切换的效果
            let timer;
            timer = setInterval(() => {
                goRight();
            }, 2000);
            // 鼠标移到当前容器触发的事件，两个按钮显示，关闭定时器
            container.addEventListener('mouseover', function () {
                leftBtn.className = 'showBtn';
                rightBtn.className = 'showBtn';
                // 暂停定时器
                clearInterval(timer);
            });
            // 鼠标离开当前容器触发的事件，两个按钮隐藏，重新开启定时器
            container.addEventListener('mouseleave', function () {
                leftBtn.className = 'hideBtn';
                rightBtn.className = 'hideBtn';
                // 再次打开定时器
                timer = setInterval(() => {
                    goRight();
                }, 2000);
            });
        </script>
    </body>
</html>