使用H5+CSS+JS实现简版轮播图

 HTML部分：

大家可以自行选择图片进行测试，更改一下图片地址和css的宽高即可；

<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: top;
        }

        ul {
            list-style: none;
        }

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

        .img-list {
            height: 390px;
        }

        .img-list li {
            position: absolute;
            opacity: 0;
            transition: opacity 1s;
        }

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

        /* 设置两个箭头的样式 */
        .prev-next a {
            font-size: 60px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            position: absolute;
            height: 70px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 2;
            opacity: 0.7;
        }

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

        #next {
            right: 0;
        }

        /* 导航点样式 */
        .dot {
            position: absolute;
            display: flex;
            justify-content: center;
            z-index: 3;
            left: 0;
            right: 0;
            bottom: 5px;
            margin: auto;
        }

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

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

JS部分：

<script>
        //获取左箭头
        const prev = document.getElementById("prev")
        //获取右箭头
        const next = document.getElementById("next")
        //获取整个outer 为了实现鼠标进入图片事件生效
        const outer = document.getElementsByClassName("outer")[0]
        //全局获取所有图片数组
        const imgArr = Array.from(document.querySelectorAll(".img-list li"))
        //全局获取所有导航点数组
        const dots = Array.from(document.querySelectorAll(".dot a"))

        //利用冒泡给document添加事件，同时判断只有在点击导航点的时候生效
        document.addEventListener("click", (event) => {
            const index = dots.indexOf(event.target)
            if (index !== -1) {
                //切换图片 切换active
                getPrevOrNext(index);
            }
        })

        //定时器自动播放图片,使用闭包保证timer数据安全不被其他变量访问
        const autoChange = (function () {
            let timer = null;
            return () => {
                if (timer === null) {
                    timer = setTimeout(function auto() {
                        getPrevOrNext("next")
                        timer = setTimeout(auto, 2000)
                    }, 2000)
                } else {
                    clearTimeout(timer)
                    timer = null;
                }
            }
        })()

        //判断是向前还是向后翻图片
        function getPrevOrNext(dir) {
            //获取当前展示照片
            const current = document.getElementsByClassName("current")[0]
            //存放下一张或上一张的照片
            let prevOrNext;
            //向上翻
            if (dir === "prev") {
                prevOrNext = current.previousElementSibling || imgArr.at(-1)
                //向下翻
            } else if (dir === "next") {
                prevOrNext = current.nextElementSibling || imgArr[0]
                //切换图片和导航点
            } else {
                prevOrNext = imgArr[dir]
            }
            //给这张照片的current删除，同时给下一个要展示的照片添加current
            const index = imgArr.indexOf(prevOrNext)
            current.classList.remove("current")
            prevOrNext.classList.add("current")
            //这里两次删除添加采用了两种方式，哪一种都可以，效果一样
            //给本导航点的active删除，给下一个要展示的导航点添加active
            const activeUse = document.getElementsByClassName("active")[0];
            activeUse.removeAttribute("class")
            dots[index].className = "active"
        }

        //鼠标进入图片停止自动播放
        outer.onmouseenter = function () {
            autoChange();
        }
        //鼠标离开图片开始自动播放
        outer.onmouseleave = function () {
            autoChange();
        }

        //向前翻图片
        prev.onclick = () => {
            getPrevOrNext("prev")
        }

        //向后翻图片
        next.onclick = () => {
            getPrevOrNext("next")
        }
    </script>

建议大家在测试时，将鼠标进入图片的事件先关闭，因为可能会造成误差！ 

其中大部分代码都有注释，逻辑较为简单，值得一看！