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

聪明的加菲猫

于 2022-05-24 16:06:06 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_48541096/article/details/124948740

本文介绍了两种使用JavaScript和CSS/CSS3实现轮播图自动切换的方法，提供了详细的代码示例，帮助开发者理解并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

第一种

   //点击按钮，序号变化
            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.47元/天解锁文章

200万优质内容无限畅学