如何用JavaScript实现无限轮播？解决元素偏移与冗余问题

算力阿峰

2026-8-18

无限轮播组件的实现问题与优化方案

我想用JavaScript实现一个无限轮播组件，当前思路是：当轮播元素移出屏幕时，将其克隆并添加到列表末尾，但运行一段时间后HTML中会出现大量克隆元素；若删除原元素，又会导致所有元素瞬间偏移。请问如何避免该偏移问题？或者有没有其他实现无限轮播的算法？

当前实现代码

HTML

<div class="carousel">
  <ul class="carousel-slides">
    <li class="carousel-slide" data-number="0">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide light-blue round" data-number="1">
      <span class="carousel-item-text">11111111 1111 <br> 111111111</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide pink round">
      <span class="carousel-item-text">22222 22222 <br> 222222222 2222222222 222222222</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide light-blue round">
      <span class="carousel-item-text">333 333333333 <br> 333333333333</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide purpule round">
      <span class="carousel-item-text">4444 444444444444<br> 44444</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide  pink round">
      <span class="carousel-item-text">55555555 55555<br> 55 5555</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide pink round">
      <span class="carousel-item-text">6666666 6666666666 <br> 66666 6666666 66666</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide  light-blue round">
      <span class="carousel-item-text">777777 777 777<br> 77 77777</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide purpule round" data-number="16">
      <span class="carousel-item-text">888 8888<br> 88888888</span>
    </li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.carousel-slides {
  display: flex;
  list-style: none;
  gap: 50px;
  flex-shrink: 1;
}

.carousel-slide {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.carousel-slide {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.carousel-item-text {
  white-space: nowrap;
}

.carousel-item-img {
  width: 100px;
  height: auto;
}

.round {
  padding: 30px 50px;
  border-radius: 120px;
}

.light-blue {
  background-color: #d8f1ff;
}

.pink {
  background-color: #ffeaf0;
}

.purpule {
  background-color: #eae9ff;
}

JavaScript

window.addEventListener("load", function () {
  const slideContainer = document.querySelector(".carousel");
  const slidesWrapper = document.querySelector(".carousel-slides");
  let slides = document.querySelectorAll(".carousel-slide");
  let index = 0;
  const interval = 1500;
  let moveDistance = 0;
  const paddingRight = 50;
  let lastSlideIndex = slides.length - 1;
  let firstClone;

  const startSlide = (index) => {
    this.setInterval(() => {
      moveDistance = moveDistance + slides[index].clientWidth + paddingRight;
      slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
      slidesWrapper.style.transition = "1s";

      firstClone = slides[index].cloneNode(true);
      firstClone.id = `first-clone-${index}`;
      slidesWrapper.append(firstClone);
      /*If uncomment it - then the problem starts */
      //slides[index].remove();

      index++;
    }, interval);
  };
  startSlide(index);
});

解决方案

方法一：修正当前思路，消除偏移问题

你当前的问题出在删除元素时机不对，应该在动画结束后，先重置容器的偏移量，再删除元素，让用户完全看不到偏移。

修改后的JS代码：

window.addEventListener("load", function () {
  const slidesWrapper = document.querySelector(".carousel-slides");
  let slides = Array.from(document.querySelectorAll(".carousel-slide"));
  let index = 0;
  const interval = 1500;
  let moveDistance = 0;
  const paddingRight = 50;
  let isTransitioning = false;

  // 监听动画结束事件，此时再操作DOM
  slidesWrapper.addEventListener("transitionend", () => {
    if (!isTransitioning) return;
    
    // 移除已移出屏幕的元素
    slidesWrapper.removeChild(slides[0]);
    // 更新slides数组
    slides = Array.from(slidesWrapper.children);
    // 重置偏移量，抵消已移除元素的宽度，取消过渡让变化瞬间完成
    moveDistance -= slides[0].clientWidth + paddingRight;
    slidesWrapper.style.transition = "none";
    slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
    
    isTransitioning = false;
  });

  const startSlide = () => {
    setInterval(() => {
      if (isTransitioning) return;
      isTransitioning = true;

      // 计算移动距离并执行动画
      moveDistance += slides[index].clientWidth + paddingRight;
      slidesWrapper.style.transition = "transform 1s ease";
      slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
      
      // 克隆当前元素到末尾，维持轮播连续性
      const clone = slides[index].cloneNode(true);
      slidesWrapper.appendChild(clone);
      slides.push(clone);
      
      index = (index + 1) % slides.length;
    }, interval);
  };
  startSlide();
});

核心逻辑：

等待动画完全结束后再操作DOM，避免视觉冲突
重置偏移量时关闭过渡效果，让位置变化瞬间完成，用户无感知
实时维护slides数组，确保后续计算的准确性

方法二：首尾克隆法（更高效的无限轮播方案）

这种方法不需要反复克隆/删除元素，只在初始化时克隆首尾几个元素，通过瞬间跳转实现无限循环，性能更优。

实现步骤：

初始化时克隆轮播列表的最后2个元素，添加到列表开头
克隆列表的前2个元素，添加到列表末尾
初始时将容器偏移到第一个真实元素的位置
当轮播到克隆的末尾元素时，瞬间跳转到真实开头位置；反之同理

示例代码：

window.addEventListener("load", function () {
  const slidesWrapper = document.querySelector(".carousel-slides");
  let slides = Array.from(document.querySelectorAll(".carousel-slide"));
  const slideCount = slides.length;
  const interval = 1500;
  const paddingRight = 50;
  let currentIndex = 1; // 初始指向第一个真实元素（开头已克隆最后一个元素）

  // 克隆首尾元素，填充到列表两端
  const lastSlides = slides.slice(-2);
  const firstSlides = slides.slice(0, 2);
  lastSlides.forEach(slide => slidesWrapper.prepend(slide.cloneNode(true)));
  firstSlides.forEach(slide => slidesWrapper.appendChild(slide.cloneNode(true)));

  // 更新slides数组并设置初始偏移
  slides = Array.from(slidesWrapper.children);
  const initialOffset = -(slides[0].clientWidth + paddingRight);
  slidesWrapper.style.transform = `translateX(${initialOffset}px)`;

  const startSlide = () => {
    setInterval(() => {
      currentIndex++;
      const moveDistance = -(currentIndex * (slides[0].clientWidth + paddingRight));
      slidesWrapper.style.transition = "transform 1s ease";
      slidesWrapper.style.transform = `translateX(${moveDistance}px)`;

      // 到达克隆的末尾元素时，瞬间跳转到真实开头位置
      if (currentIndex === slides.length - 2) {
        setTimeout(() => {
          slidesWrapper.style.transition = "none";
          currentIndex = 1;
          slidesWrapper.style.transform = `translateX(${-currentIndex * (slides[0].clientWidth + paddingRight)}px)`;
        }, 1000);
      }
    }, interval);
  };
  startSlide();
});

核心优势：

无需频繁操作DOM，性能开销更低
避免大量克隆元素堆积的问题
跳转过程用户无感知，视觉上完全实现无限循环

内容的提问来源于stack exchange，提问作者Main Admin

如何用JavaScript实现无限轮播？解决元素偏移与冗余问题

当前实现代码 #

HTML #

CSS #

JavaScript #

解决方案 #

方法一：修正当前思路，消除偏移问题 #

方法二：首尾克隆法（更高效的无限轮播方案） #