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

<!DOCTYPE html>
<html>
 
<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;
        }
 
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        img {
            vertical-align: middle;
        }
 
        a {
            text-decoration: none;
        }
 
        ul {
            list-style: none;
        }
 
        .box {
            position: relative;
            width: 800px;
            height: 300px;
            margin: 100px auto;
        }
 
        /* 轮播主体 */
        nav a {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 300px;
        }
 
        nav img {
            width: 100%;
            height: 100%;
        }
 
        nav a:first-child {
            z-index: 1;
        }
 
        /* 左右按钮 */
        .prev,
        .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            
            z-index: 1;
            cursor: pointer;
            z-index: 999;
        }
 
        .prev {
            left: 0;
        }
 
        .next {
            right: 0;
        }
 
        /* 小圆点 */
        .circle {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 2px;
            transform: translateX(-50%);
            z-index: 999;
        }
 
        .circle li {
            width: 10px;
            height: 10px;
            background-color: skyblue;
            border-radius: 50%;
            margin: 10px;
            cursor: pointer;
        }
 
        .active {
            background-color: pink !important;
        }
    </style>
</head>
 
<body>
    <div>
        <!-- 轮播图 -->
        <nav>
            <a href="javascript:;" data-id="0" style="display: block;"><img src="../images/1.webp" alt=""></a>
            <a href="javascript:;" data-id="1"><img src="../images/2.webp" alt=""></a>
            <a href="javascript:;" data-id="2"><img src="../images/3.webp" alt=""></a>
            <!-- 左右按钮 -->
            <div>&lt;</div>
            <div>&gt;</div>
        </nav>
        <!-- 小圆点 -->
        <ul>
            <li data-id="0"></li>
            <li data-id="1"></li>
            <li data-id="2"></li>
        </ul>
    </div>
    <script>
        const box = document.querySelector('.box')
        const nav = document.querySelector('nav')
        const as = document.querySelectorAll('nav a')
        const prev = document.querySelector('.prev')
        const next = document.querySelector('.next')
        const circle = document.querySelector('.circle')
        // 获取显示的轮播图
        function showId() {
            let id = +document.querySelector("nav>a[style='display: block;']").dataset.id
            return id
        }
        // 利用事件委托,实现小圆点功能
        circle.addEventListener('click', function (e) {
            if (e.target.nodeName === 'LI') {
                // 排他，给小圆点添加active样式
                document.querySelector('.active').classList.remove('active')
                e.target.classList.add('active')
                as.forEach(item => item.style.display = 'none')
                nav.children[e.target.dataset.id].style.display = 'block'
            }
        })
        // 左按钮功能
        prev.addEventListener('click', function () {
            const id = showId()
            as.forEach(item => item.style.display = 'none')
            document.querySelector('.active').classList.remove('active')
            if (id <= 0) {
                as[as.length - 1].style.display = 'block'
                circle.children[as.length - 1].classList.add('active')
            } else {
                as[id - 1].style.display = 'block'
                circle.children[id - 1].classList.add('active')
            }
        })
        // 右按钮功能
        next.addEventListener('click', function () {
            const id = showId()
            as.forEach(item => item.style.display = 'none')
            document.querySelector('.active').classList.remove('active')
            if (id >= as.length - 1) {
                as[0].style.display = 'block'
                circle.children[0].classList.add('active')
            } else {
                as[id + 1].style.display = 'block'
                circle.children[id + 1].classList.add('active')
            }
        })
        // 自动轮播功能
        let timer = setInterval(() => {
            next.click()
        }, 1000)
        // 鼠标经过，暂停轮播
        box.addEventListener('mouseenter', function () {
            clearInterval(timer)
        })
        // 鼠标离开，继续轮播
        box.addEventListener('mouseleave', function () {
            timer = setInterval(() => {
                next.click()
            }, 1000)
        })
    </script>
</body>
 
</html>
以上就是直播带货源码，通过js实现轮播图的效果，更多内容欢迎关注之后的文章
posted @ 2022-10-07 14:18 云豹科技-苏凌霄阅读(42) 评论(0) 收藏举报
刷新页面返回顶部
直播带货源码，通过js实现轮播图的效果

公告
