二种方法js实现轮播图自动切换

先看效果图

 

第一种

   //点击按钮，序号变化
            showIdx++;
            if (showIdx == imgArr.length) {
                showIdx = 0;
            }

            //所有盒子左移动
            for (let i = 0; i <items.length; i++) {
                items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";

            }
            //冗余容器从页面中删除

            //当冗余容器从页面中移除后，为了保证结构想对应，所以呀item中数组也要把这个容器删除
            let deleteBox = items.shift();
            // console.log(items);
            deleteBox.remove();
            //在用户看不到的内存中，变更【被从这个页面删除的元素的位置
            deleteBox.style.left = "900px";
            wrapper.appendChild(deleteBox);
            items.push(deleteBox);
            //把容器从小添加至压面后，容器加载的图片在当前的下一站
            // 第七步 把容器重新添加至页面后，容器加载的图片要是当前这张的下一张
            if (showIdx == imgArr.length - 1) {
                deleteBox.innerHTML = `<img src=${imgArr[0]}>`;
            } else {
                deleteBox.innerHTML = `<img src=${imgArr[showIdx + 1]}>`;
            }

 

第二种，图片切换，css代码

html,
body,
ul,
li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.loopbox {
    wi