直播带货源码，通过js实现轮播图的效果

<!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Document</title><br>    <style><br>        * {<br>            padding: 0;<br>            margin: 0;<br>            box-sizing: border-box;<br>        }<br> <br>        html,<br>        body {<br>            width: 100%;<br>            height: 100%;<br>        }<br> <br>        img {<br>            vertical-align: middle;<br>        }<br> <br>        a {<br>            text-decoration: none;<br>        }<br> <br>        ul {<br>            list-style: none;<br>        }<br> <br>        .box {<br>            position: relative;<br>            width: 800px;<br>            height: 300px;<br>            margin: 100px auto;<br>        }<br> <br>        /* 轮播主体 */<br>        nav a {<br>            position: absolute;<br>            top: 0;<br>            left: 0;<br>            width: 800px;<br>            height: 300px;<br>        }<br> <br>        nav img {<br>            width: 100%;<br>            height: 100%;<br>        }<br> <br>        nav a:first-child {<br>            z-index: 1;<br>        }<br> <br>        /* 左右按钮 */<br>        .prev,<br>        .next {<br>            position: absolute;<br>            top: 50%;<br>            transform: translateY(-50%);<br>            width: 30px;<br>            height: 30px;<br>            text-align: center;<br>            line-height: 30px;<br>            <br>            z-index: 1;<br>            cursor: pointer;<br>            z-index: 999;<br>        }<br> <br>        .prev {<br>            left: 0;<br>        }<br> <br>        .next {<br>            right: 0;<br>        }<br> <br>        /* 小圆点 */<br>        .circle {<br>            display: flex;<br>            position: absolute;<br>            left: 50%;<br>            bottom: 2px;<br>            transform: translateX(-50%);<br>            z-index: 999;<br>        }<br> <br>        .circle li {<br>            width: 10px;<br>            height: 10px;<br>            background-color: skyblue;<br>            border-radius: 50%;<br>            margin: 10px;<br>            cursor: pointer;<br>        }<br> <br>        .active {<br>            background-color: pink !important;<br>        }<br>    </style><br></head><br> <br><body><br>    <div><br>        <!-- 轮播图 --><br>        <nav><br>            <a href="javascript:;" data-id="0" style="display: block;"><img src="../images/1.webp" alt=""></a><br>            <a href="javascript:;" data-id="1"><img src="../images/2.webp" alt=""></a><br>            <a href="javascript:;" data-id="2"><img src="../images/3.webp" alt=""></a><br>            <!-- 左右按钮 --><br>            <div>&lt;</div><br>            <div>&gt;</div><br>        </nav><br>        <!-- 小圆点 --><br>        <ul><br>            <li data-id="0"></li><br>            <li data-id="1"></li><br>            <li data-id="2"></li><br>        </ul><br>    </div><br>    <script><br>        const box = document.querySelector('.box')<br>        const nav = document.querySelector('nav')<br>        const as = document.querySelectorAll('nav a')<br>        const prev = document.querySelector('.prev')<br>        const next = document.querySelector('.next')<br>        const circle = document.querySelector('.circle')<br>        // 获取显示的轮播图<br>        function showId() {<br>            let id = +document.querySelector("nav>a[style='display: block;']").dataset.id<br>            return id<br>        }<br>        // 利用事件委托,实现小圆点功能<br>        circle.addEventListener('click', function (e) {<br>            if (e.target.nodeName === 'LI') {<br>                // 排他，给小圆点添加active样式<br>                document.querySelector('.active').classList.remove('active')<br>                e.target.classList.add('active')<br>                as.forEach(item => item.style.display = 'none')<br>                nav.children[e.target.dataset.id].style.display = 'block'<br>            }<br>        })<br>        // 左按钮功能<br>        prev.addEventListener('click', function () {<br>            const id = showId()<br>            as.forEach(item => item.style.display = 'none')<br>            document.querySelector('.active').classList.remove('active')<br>            if (id <= 0) {<br>                as[as.length - 1].style.display = 'block'<br>                circle.children[as.length - 1].classList.add('active')<br>            } else {<br>                as[id - 1].style.display = 'block'<br>                circle.children[id - 1].classList.add('active')<br>            }<br>        })<br>        // 右按钮功能<br>        next.addEventListener('click', function () {<br>            const id = showId()<br>            as.forEach(item => item.style.display = 'none')<br>            document.querySelector('.active').classList.remove('active')<br>            if (id >= as.length - 1) {<br>                as[0].style.display = 'block'<br>                circle.children[0].classList.add('active')<br>            } else {<br>                as[id + 1].style.display = 'block'<br>                circle.children[id + 1].classList.add('active')<br>            }<br>        })<br>        // 自动轮播功能<br>        let timer = setInterval(() => {<br>            next.click()<br>        }, 1000)<br>        // 鼠标经过，暂停轮播<br>        box.addEventListener('mouseenter', function () {<br>            clearInterval(timer)<br>        })<br>        // 鼠标离开，继续轮播<br>        box.addEventListener('mouseleave', function () {<br>            timer = setInterval(() => {<br>                next.click()<br>            }, 1000)<br>        })<br>    </script><br></body><br> <br></html>