使用JS实现轮播图

HTML：

<div class="outer">
        <ul class="img-list">
            <li class="current">
                <a href="#">
                    <img src="./images/1.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/4.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png" />
                </a>
            </li>
        </ul>

        <!-- 图片两边添加切换按钮 -->
        <div class="prev-next">
            <a id="prev" href="javascript:;">&lt;</a>
            <a id="next" href="javascript:;">&gt;</a>
        </div>

        <!-- 导航点 -->
        <div class="dot">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

CSS：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            /* 去除图片默认空隙 */
            vertical-align: middle;
        }

        ul {
            list-style: none;
        }

        .outer {
            position: relative;
            width: 640px;
            height: 390px;
            margin: 100px auto;
        }

        .img-list li {
            position: absolute;
            opacity: 0;
            /* 添加过渡 */
            transition: opacity 1s;
        }

        li.current {
            z-index: 1;
            opacity: 1;
        }


        /* 左右两边按钮 */
        .prev-next a {
            font-size: 60px;
            font-weight: 700;
            color: #fff;
            height: 60px;
            z-index: 2;
            text-decoration: none;
            /* 设置垂直居中，要有高度，没高度则盒子被拉长*/
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;

            opacity: .5;
        }

        .prev-next a:hover {
            opacity: 1;
        }

        #next {
            right: 0;
        }

        /* 导航点 */
        .dot {
            /* 设置水平居中，要有宽度，没宽度则盒子被拉长 */
            position: absolute;
            right: 0;
            left: 0;
            bottom: 5px;
            /* margin: auto; */
            display: flex;
            /* 主轴上子元素居中 */
            justify-content: center;
            z-index: 3;
        }

        .dot a {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 5px;
            background-color: #fff;
            opacity: .5;
        }

        .dot a:hover,
        .dot .active {
            opacity: 1;
        }
    </style>

JS：代码有点乱，可以优化

<script>
        /*
            自动切换图片
        */
        function changeImg(dir) {
            // 获取当前当前显示图片
            const current = document.querySelector(".img-list .current")
            let next

            // 判断参数
            if (dir === "prev") {
                // 获取上一张图片 通过逻辑或中断执行表达式
                next = current.previousElementSibling || document.querySelector(".img-list li:last-child")
            } else if (dir === "next") {
                // 获取下一张图片 通过逻辑或中断执行表达式
                next = current.nextElementSibling || document.querySelector(".img-list li:first-child")
            } else {
                next = document.querySelectorAll(".img-list li")[dir]
            }
            // 获取要显示的图片的索引
            const index = [...document.querySelectorAll(".img-list li")].indexOf(next)
            // 切换状态
            current.classList.remove("current")
            next.classList.add("current")
            // 切换小点
            const currentActive = document.querySelector(".active")
            currentActive.classList.remove("active")

            dots[index].classList.add("active")
        }

        // 函数的闭包
        const toggleChange = (function () {
            let timer = null
            return () => {
                if (timer === null) {
                    timer = setTimeout(function fn() {
                        changeImg("next")
                        timer = setTimeout(fn, 3000)
                    }, 3000)
                } else {
                    clearTimeout(timer)
                    timer = null
                }
            }
        })();

        toggleChange()


        // 当鼠标移进div停止图片切换，移出继续切换
        const outer = document.getElementsByClassName("outer")[0]

        outer.onmouseenter = () => {
            toggleChange()
        }
        outer.onmouseleave = () => {
            toggleChange()
        }

        /* 
            点击按钮切换图片
        */
        const prev = document.getElementById("prev")
        const next = document.getElementById("next")

        prev.onclick = () => {
            changeImg("prev")
        }
        next.onclick = () => {
            changeImg("next")
        }

        /*
            获取五个小点
        */
        const dots = [...document.querySelectorAll(".dot a")]
        document.addEventListener("click", (event) => {
            const index = dots.indexOf(event.target)

            if (index !== -1) {
                /* 切换图片 */
                changeImg(index)
            }
        })
    </script>

持续学习中~

（ps：轮播图JS好难qwq 好绕， 还得多写写）