简单轮播图bug

轮播图bug

现象:轮播图到不了指定的位置.最后一张图放完后,第一张图没有

完全显示,就开启第二张图.

let banner = document.querySelector('.banner');

        Array.from(banner.children).forEach(function (item, index) {
            item.style.backgroundImage = ` url('../07pink事件/images/b${index + 1}.webp')`
        })

        let index = 0;
        let timer
        function autoPlay() {
            timer = setInterval(() => {
                index++;
                if (index == banner.children.length) {
                    index = 0;
                }
                console.log(index);
                move(banner, { left: -index * 1000 })
            }, 2000)
        }

问题原因在于,每次动画,开启的是两个定时器,我的轮播图每次还没到指定位置就开启了下一下定时器,于是,我在封装的动画那里,改了时间.

function move(el, obj, callback) {
    clearInterval(el.timer);
    el.timer = setInterval(() => {
        for (let key in obj) {
            let target = obj[key];
            let current = parseFloat(getStyle(el)[key]);
            let step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : 						Math.floor(step);
            el.style[key] = current + step + 'px';
            if (current == target) {
                clearInterval(el.timer)
            }
        }
        if (callback instanceof Function) {
            callback();
        }
    }, 30)//这里,改成30,快点跑吧大哥
}

还有问题,它每次还是差那么一点,然后我这个大冤种,发现,ul和li自带的margin和padding,好家伙,都脱离文档流了,还能有威力,嗯,改了之后,完美.