javascript - 如何在 Javascript 中创建无限轮播？

Question

我想用 javascript 制作一个无限旋转木马。当元素离开屏幕时，我克隆它们并粘贴他们在列表的末尾。但是一分钟后，HTML 布局中出现了很多克隆元素。我决定在克隆后删除这个元素。但是我得到了所有元素的即时偏移。如何避免？或者也许还有另一种算法可以实现这个无尽的轮播？

这是代码 https://codepen.io/alessandro-kex/pen/abGWNEK

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);
});

* {
  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;
}

  <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>

Answer 1

您应该创建一个轮播并使用 JavaScript 将所有数据保存在一个数组中。然后默认情况下，在加载时显示数组中的第一个元素。当用户点击查看轮播上的下一个元素或某个幻灯片的时间到期时，只需调用一个函数来更改幻灯片。为此，初始化一个计数器 以跟踪当前幻灯片索引查看并在幻灯片更改时更新它。当用户希望在上一张幻灯片上查看下一张幻灯片时，将 counter 设置为 0。同样，当用户希望在第一张幻灯片上查看上一张幻灯片时，将 counter 设置为 n-1 其中 n 是您提供的幻灯片数量。