轮播图图片无法自动播放

Question

1、为什么小li不可以添加style属性
2、我的轮播图为什么不动

window.addEventListener('load', function () {
    // this.alert(11)
    let navline = document.getElementById('navline');
    let lis = document.querySelectorAll('.top-nav-li');
    let img_ul = document.querySelector('#publish-copy')
    let b_dot = document.querySelector('#b_dot')
    let cLis = b_dot.children
    let picN = 0
    let cirN = 0
    let timer = null
    let len = img_ul.children.length
    let rate = 15
    let width = img_ul.offsetwidth

    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            lis[i].index = i;
            let ls = lis[i].index;
            if (ls > 0 && ls < lis.length - 1) {
                navline.style.width = 120 + 'px'
                navline.style.left = lis[i].offsetLeft + 'px'
                this.children[1].style.display = 'block'
            } else {
                navline.style.width = 69 + 'px'
                navline.style.left = lis[i].offsetLeft + 'px'
            }
        }
        lis[i].onmouseout = function () {
            navline.style.left = 0 + 'px'
            this.children[1].style.display = 'none'
        }
    }

    function Roll(distance) {                                         //参数distance：滚动的目标点（必为图片宽度的倍数）
        clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！
        var speed = img_ul.offsetLeft < distance ? rate : (0 - rate);     //判断图片移动的方向

        img_ul.timer = setInterval(function () {                           //设置定时器，每隔10毫秒，调用一次该匿名函数
            img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
            var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
            /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
            if (Math.abs(leave) <= Math.abs(speed)) {
                clearInterval(img_ul.timer);
                img_ul.style.left = distance + "px";
            }
        }, 10);
    }
    /*克隆第一个li到列表末*/
    img_ul.appendChild(img_ul.children[0].cloneNode(true));

    function autoRun() {
        picN++;
        cirN++;
        if (picN > len) {                  //滚动完克隆项后
            img_ul.style.left = 0;       //改变left至真正的第一项处
            picN = 1;                    //从第二张开始显示
        }
        Roll(-picN * width);

        if (cirN > len - 1) {                //判断是否到了最后一个圆点
            cirN = 0;
        }
        for (var i = 0; i < len; i++) {
            cLis[i].className = "";
        }
        cLis[cirN].className = "on";
    }

    timer = setInterval(autoRun, 2000);

})

Answer 1

html和css呢？

只有js代码无法解决问题。题主可以f12打开浏览器开发工具看控制台是否有报错误

有其他问题可以继续交流~