轮播上一个和下一个按钮逻辑不起作用

Question

我正在尝试使用纯 Javascript 制作轮播。我成功地滑动了轮播并创建了左右按钮。

我将幻灯片功能添加到按钮单击事件侦听器中，但在按钮上实现该功能时遇到问题。它的行为不像预期的那样。我的代码如下，我该如何解决这个问题？

const images = document.getElementById('imgs'); //here
const allImages = document.querySelectorAll('#imgs img');
const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');
let index = 0;

function changeSliderPage() {
  const dot = [...document.getElementsByClassName('star')];

  index++;

  if (index > allImages.length - 1) {
    index = 0
  }

  imgs.style.transform = `translateX(${-index * 500}px)`;

  dot.forEach((dot, i) => {
    if (i === index) {
      dot.classList.add('active')
    } else {
      dot.classList.remove('active')
    }
  });

};

allImages.forEach(i => {
  const elem = document.createElement('div');
  elem.classList.add('star');
  document.body.appendChild(elem)
});




rightBtn.onclick = () => {
  changeSliderPage(index + 1); 
}
leftBtn.onclick = () => {
 changeSliderPage(index - 1);
}

let x = setInterval(changeSliderPage, 100000);


images.onmouseover = () => {
  clearInterval(x)
}

images.onmouseout = () => {
  x = setInterval(changeSliderPage, 2000);
}

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.carousel {
  overflow: hidden;
  width: 500px;
  height: 500px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
  border-radius: 5px;
}

.image-container {
  display: flex;
 transition: transform 300ms linear;
 transform: translateX(0);
}

img {
  width:500px;
  height: 500px;
  object-fit: cover;
}

.star{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 10px;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  background-color: #eeeeee;

}
.star.active{
  background-color: red;
}
button{
  cursor: pointer;
  position: relative;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  height: 50px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: calc(50% - 25px);
}
button:hover {
  background-color: rgba(0,0,0,0.8);
};

button.left {
  border-radius: 3px 0 0 3px;
  right: 0;
}
button.left {
  border-radius: 3px 0 0 3px;
  left: 0;
}

<button id="left">&#10094;</button>
  <button id="right">&#10095;</button>

  <div class="carousel">
    <div class="image-container" id="imgs" >
      <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
    </div>
  </div>

Answer 1

我在轮播中使用的逻辑：

例如，您有 4 张图片： [1][2][3][4]

我有一个滑动每个图像的动画，我添加了与第 1 个图像相同的第 5 个图像： [1][2][3][4][1]

想象一下显示当前显示的图像的光标，我将光标标记为！ ！ 所以一开始： [!1!][2][3][4][1]

现在滑块继续移动... [1][!2!][3][4][1]

等等……

它移动到最后一张图片： [1][2][3][4][!1!]

现在它必须在引擎盖下从最后一张图片移动到第一张图片，但没有任何动画，因此用户看不到整个变化：

[!1!][2][3][4][5]

这样你可以获得无限轮播，只需要检查当前图像是否是最后一张并且你想向右滑动 -> 没有动画。如果您在第一张图片上并想向左滑动，则相同。