Javascript 当我到达最后一张图像时，如何使图像库滑块在不反转动画的情况下循环？

这是画廊的密码笔

当你看到最后一幅图像时，它不是为下一幅图像设置动画，而是相反，基本上显示我们刚才点击的所有图像，然后再次显示第一幅图像。假设我有100张图片，它会反转，在显示开始图片之前显示所有100张图片

我不知道如何使它从图像1,2,3,4开始，然后只显示1而不显示图像3,2

这段代码是使反向动画发生的原因，但是如果我删除它，它看起来达到了我想要的效果，当它只是变为1,2,3,4，然后变为1而不显示3,2，但是没有动画，我最终想要添加新的效果和自定义

 .slide {
position: absolute;
width: 100%;
height: 100%;
transition: all 1s ease-in-out;
 }

另外，当我点击下一个或上一个按钮时，它会用相同的索引值更新每一张图片，所以也许有一种方法可以创建一个JS函数，只更新我正在使用的图片，而不是所有图片来解决这个问题？我不知道我该怎么写，或者他们是否能解决这个问题

---

这是我的javascript上的问题吗？或者CSS？

我不知道这是否是最好的解决方案，但您可以在CSS中的单独类上进行转换，然后根据计数器添加/删除该类。因此，如果您在第一张幻灯片上，请添加该类，然后在结束时将其删除，这样就不会从最后一张幻灯片过渡到第一张幻灯片

在CSS中：

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.transition {
  transition: all 1s ease-in-out;
}

在您的JS中：

function slider() {
  //add the class at the beginning of the slideshow
  if (counter === 1) {
    slides.forEach(function (slide, index) {
      slide.classList.add("transition");
    });
  }
  //remove the class at the end of the slideshow
  if (counter === slides.length) {
    slides.forEach(function (slide, index) {
      slide.classList.remove("transition");
    });
    counter = 0;
  }
  if (counter < 0) {
    counter = slides.length - 1;
  }

  slides.forEach(function (slide) {
    slide.style.transform = `translateX(-${counter * 100}%)`;
  });
}

函数滑块（）{
//在幻灯片的开头添加类
如果（计数器==1）{
slides.forEach（函数（幻灯片、索引）{
幻灯片.classList.add（“转换”）；
});
}
//删除幻灯片末尾的类
如果（计数器===幻灯片长度）{
slides.forEach（函数（幻灯片、索引）{
幻灯片.classList.remove（“转换”）；
});
计数器=0；
}
如果（计数器<0）{
计数器=幻灯片长度-1；
}
幻灯片。forEach（函数（幻灯片）{
slide.style.transform=`translateX（-${counter*100}%）`；
});
}

我不知道这是否是最好的解决方案，但您可以在CSS中的单独类上进行转换，然后根据计数器添加/删除该类。因此，如果您在第一张幻灯片上，请添加该类，然后在结束时将其删除，这样就不会从最后一张幻灯片过渡到第一张幻灯片

在CSS中：

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.transition {
  transition: all 1s ease-in-out;
}

在您的JS中：

function slider() {
  //add the class at the beginning of the slideshow
  if (counter === 1) {
    slides.forEach(function (slide, index) {
      slide.classList.add("transition");
    });
  }
  //remove the class at the end of the slideshow
  if (counter === slides.length) {
    slides.forEach(function (slide, index) {
      slide.classList.remove("transition");
    });
    counter = 0;
  }
  if (counter < 0) {
    counter = slides.length - 1;
  }

  slides.forEach(function (slide) {
    slide.style.transform = `translateX(-${counter * 100}%)`;
  });
}

函数滑块（）{
//在幻灯片的开头添加类
如果（计数器==1）{
slides.forEach（函数（幻灯片、索引）{
幻灯片.classList.add（“转换”）；
});
}
//删除幻灯片末尾的类
如果（计数器===幻灯片长度）{
slides.forEach（函数（幻灯片、索引）{
幻灯片.classList.remove（“转换”）；
});
计数器=0；
}
如果（计数器<0）{
计数器=幻灯片长度-1；
}
幻灯片。forEach（函数（幻灯片）{
slide.style.transform=`translateX（-${counter*100}%）`；
});
}

唯一的问题是当它重置回1时，动画会消失，因此重置时看起来很奇怪。我试图弄清楚，一旦流体动画通过循环完成，如何保持它。另外，如果你点击上一个按钮，动画会重复同样的反向效果，因此下一个按钮和上一个按钮都需要使用。对不起，我没有读你文章的最后一部分。那样的话，我不知道。希望其他人会有答案。唯一的问题是当它重置回1时，动画会消失，所以重置时看起来很奇怪。我试图弄清楚，一旦流体动画通过循环完成，如何保持它。另外，如果你点击上一个按钮，动画会重复同样的反向效果，因此下一个按钮和上一个按钮都需要使用。对不起，我没有读你文章的最后一部分。那样的话，我不知道。希望其他人会有答案。