轮播图制作

视屏详情介绍:
https://www.bilibili.com/video/BV1jb411q7ax

index:

 <div class="recommendation">
            <div class="broadcast">
                <div class="container">
                    <img src="//i0.hdslb.com/bfs/archive/d340abc2f5a8197699e591947a3068cf3d105f6c.jpg@880w_388h_1c_95q" width="550px" height="242px" alt="" id="1">
                    <img src="https://i0.hdslb.com/bfs/sycp/creative_img/202102/18abd8340550be4c87be0ed096bc3b82.jpg@880w_388h_1c_95q" id="2" alt="">
                    <img src="https://i0.hdslb.com/bfs/sycp/creative_img/202102/51d78de02489aba410dd8f23f31fd38a.jpg@880w_388h_1c_95q" id="3" alt="">
                    <img src="//i0.hdslb.com/bfs/archive/b0656393d760a7b7ab797421a8edbb0a07e95bad.jpg@880w_388h_1c_95q" id="4" alt="">
                    <img src="//i0.hdslb.com/bfs/archive/e754789e7c3880e3b8445fe20e94cc65ca3badc3.jpg@880w_388h_1c_95q" id="5" alt="">
                </div>

注意:timer的值 要设置为全局变量 后面clearInterval才能访问
JavaScript:

// 轮播图制作
window.onload = function() {
    var j = 0;
    var dots = document.querySelector('.dots');
    var dot = dots.children;
    var broadcast = document.querySelector('.broadcast');
    var imgs = broadcast.firstElementChild;
    // 点及移动
    function dotsmove() {
        for (var i = 0; i < dot.length; i++) {
            if (j == i) {
                dot[i].setAttribute('class', 'dots-change');
            } else {
                dot[i].removeAttribute('class');
            }
        }
    }

    // 图片移动
    function move() {
        if (j == 0) {
            dotsmove();
            imgs.style.left = 0 + 'px';
            j = 1;
        } else if (j == 1) {
            imgs.style.left = -550 + 'px';
            dotsmove();
            j = 2;
        } else if (j == 2) {
            imgs.style.left = -1100 + 'px';
            dotsmove();
            j = 3;
        } else if (j == 3) {
            imgs.style.left = -1650 + 'px';
            dotsmove();
            j = 4;
        } else if (j == 4) {
            imgs.style.left = -2200 + 'px';
            dotsmove();
            j = 0;
        }
    }


    function automove() {
        timer = setInterval(move, 3000);
    }
    automove();
    // 鼠标放进图片停止移动 拿出图片可以移动
    broadcast.addEventListener('mouseover', () => {
        clearInterval(timer);
    })
    broadcast.addEventListener('mouseout', automove())

}