JS 原生手写轮播图

不念不忘少年蓝@ 2023-10-11 22:08 37阅读 0赞

只是实现了原生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>

达到的效果图如下

![ab98735937c84614aaef7fd9dbcf7360.gif][]

[ab98735937c84614aaef7fd9dbcf7360.gif]: https://img-blog.csdnimg.cn/ab98735937c84614aaef7fd9dbcf7360.gif