Javascript 单击位于数组末尾的滑块上的事件

我正在尝试使用javascript创建一个简单的滑块。 到目前为止，我的代码如下：

html:

以前的
下一个

Js:

const slides=document.querySelectorAll（“.slide”）
const slidescanner=document.querySelector（“.slides容器”）
常量slidescont=slides.length
const slideWidth=幻灯片[0]。客户端宽度
const prevButton=document.querySelector（“.button previous”）
const nextButton=document.querySelector（“.button next”）
功能下一页幻灯片（幻灯片）{
用于（幻灯片=0；幻灯片<幻灯片计数；幻灯片++）{
SlideContainer.style.transform='translateX（-slide+（slide*slideWidth）+'px）'
}
}
addEventListener（'click'，function（）{
nextSlide（）
})

我遇到的问题是，当我单击“下一步”按钮时，滑块会一直移动到数组的末尾，从而跳过中间的所有图像

让我的for循环在每个图像处停止并在单击按钮时再次运行的最佳方式是什么？

让current=0；
let current = 0;

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (slide * slideWidth) + 'px)';
        current++;
      }
}

功能下一页幻灯片（幻灯片）{
如果（当前<滑动计数）{
slidecontainer.style.transform='translateX（-'+（slide*slideWidth）+'px'；
电流++；
}
}

让电流=0；
功能下一页幻灯片（幻灯片）{
如果（当前<滑动计数）{
slidecontainer.style.transform='translateX（-'+（slide*slideWidth）+'px'；
电流++；
}
}

每次单击都会跳到末尾的原因是：

for（）

循环。您正在循环浏览所有幻灯片-在每次单击时生成新的

translateX

坐标。每次都给你留下最后的价值

给出的答案定义了一种模式，通过跟踪

nextSlide（）

处理程序外部的当前“slide”索引来避免

for（）

循环陷阱

let current = 0; // <- independent index reference

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (current * slideWidth) + 'px)';
        current++;  // <- increment the index
      }
}
// I changed the `slide` reference in `(slide * slideWidth)` to `current`  to reflect the intent of the code

---

let current=0；// 每次单击都会跳到末尾的原因是：
for（）
循环。您正在循环浏览所有幻灯片-在每次单击时生成新的
translateX
坐标。每次都给你留下最后的价值

给出的答案定义了一种模式，通过跟踪
nextSlide（）
处理程序外部的当前“slide”索引来避免
for（）
循环陷阱

let current = 0; // <- independent index reference

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (current * slideWidth) + 'px)';
        current++;  // <- increment the index
      }
}
// I changed the `slide` reference in `(slide * slideWidth)` to `current`  to reflect the intent of the code

let current=0；// 我可能不太明白您试图做什么，或者为什么要使用for循环，但如果只是为了选择下一张幻灯片，您可以使用以下内容：

var currentSlide = 0;

function nextSlide() {
  //make sure currentSlide is in range
  currentSlide = (currentSlide >= slidesCount) ? 0 : ++currentSlide;

  slidesContainer.style.transform = 'translateX(-' + (currentSlide * slideWidth) + 'px)';
}

nextButton.addEventListener('click', nextSlide);

或者更灵活一点：

var currentSlide = 0;

function nextSlide(direction /* Number */) {
  if(!direction) direction = 1; //default

  setSlide(currentSlide + direction % slidesCount);
}

function setSlide(index) {
  if(index === currentSlide) return;

  //make sure index is in range
  while(index >= slidesCount) index -= slidesCount;
  while(index < 0) index += slidesCount;

  slidesContainer.style.transform = 'translateX(-' + (index * slideWidth) + 'px)';

  currentSlide = index;
}

nextButton.addEventListener('click', function() {
  nextSlide(this.dataset["direction"]); //by using data you don't need two different button classes
});

var-currentSlide=0；
函数nextSlide（方向/*编号*/）{
如果（！direction）direction=1；//默认值
设置滑动（当前滑动+方向%滑动计数）；
}
函数setSlide（索引）{
如果（索引===当前幻灯片）返回；
//确保索引在范围内
而（索引>=滑动计数）索引-=滑动计数；
而（指数<0）指数+=滑动计数；
slidecontainer.style.transform='translateX（-'+（索引*slideWidth）+'px'；
当前幻灯片=索引；
}
addEventListener（'click'，function（）{
nextSlide（this.dataset[“direction”]）；//通过使用数据，您不需要两个不同的按钮类
});

但是如果你坚持使用循环，我恐怕在这种情况下它是不合适的，因为translateX的计算是基于给定的值
 我可能不太明白您想做什么，或者为什么要使用for循环，但如果只是为了选择下一张幻灯片，您可以使用以下内容：

var currentSlide = 0;

function nextSlide() {
  //make sure currentSlide is in range
  currentSlide = (currentSlide >= slidesCount) ? 0 : ++currentSlide;

  slidesContainer.style.transform = 'translateX(-' + (currentSlide * slideWidth) + 'px)';
}

nextButton.addEventListener('click', nextSlide);

或者更灵活一点：

var currentSlide = 0;

function nextSlide(direction /* Number */) {
  if(!direction) direction = 1; //default

  setSlide(currentSlide + direction % slidesCount);
}

function setSlide(index) {
  if(index === currentSlide) return;

  //make sure index is in range
  while(index >= slidesCount) index -= slidesCount;
  while(index < 0) index += slidesCount;

  slidesContainer.style.transform = 'translateX(-' + (index * slideWidth) + 'px)';

  currentSlide = index;
}

nextButton.addEventListener('click', function() {
  nextSlide(this.dataset["direction"]); //by using data you don't need two different button classes
});

var-currentSlide=0；
函数nextSlide（方向/*编号*/）{
如果（！direction）direction=1；//默认值
设置滑动（当前滑动+方向%滑动计数）；
}
函数setSlide（索引）{
如果（索引===当前幻灯片）返回；
//确保索引在范围内
而（索引>=滑动计数）索引-=滑动计数；
而（指数<0）指数+=滑动计数；
slidecontainer.style.transform='translateX（-'+（索引*slideWidth）+'px'；
当前幻灯片=索引；
}
addEventListener（'click'，function（）{
nextSlide（this.dataset[“direction”]）；//通过使用数据，您不需要两个不同的按钮类
});

但是如果你坚持使用循环，我恐怕在这种情况下它是不合适的，因为translateX的计算是基于给定的值
 在“下一张”幻灯片上着陆之前，您是否试图让它在每张幻灯片上短暂停止？在“下一张”幻灯片上着陆之前，您是否试图让它在每张幻灯片上短暂停止？