当计数器变量大于数组的长度时，将计数器变量从零重新启动的功能——不起作用

Question

我是一名开发新手，正在尝试使用 html、css 和 javascript.

构建图像轮播

我有一个名为 'slides' 的图像数组和一个名为 currentSlide、prevSlide、nextSlide 的变量，我想使用它们来跟踪相关的幻灯片索引，以便稍后可以将正确的幻灯片显示为值用于变量更新。

我正在努力做到这一点，因此当用户单击 'NEXT' 时会发生以下情况：

事件侦听器调用名为 slideRight 的函数
slideRight 将调用 2 个函数：updateVarsRight 和 displaySlides
- updateVarsRight 会将变量（例如 currentSlide）递增 1 然后调用另一个名为 enforceLoop 的函数。
  - enforceLoop() 将确保递增的变量值不要移出相应的图像数组值。（IE。当 currentSlide > slides.length-1, currentSlide = 0).
- displaySlides 当然会显示新幻灯片

我遇到的问题是 enforceLoop 函数。如果我检查控制台并单击下一步，似乎当 currentSlide 的值增加超过数组中幻灯片的总量并且应该设置回零时，它不会并继续向上计数。

我很难表达清楚，但如果您能够运行 codepen 并在单击下一步时检查控制台，那么您应该清楚我的意思。

我确信有更好更有效的方法来构建幻灯片，但我试图自己解决问题，这是我决定采用的策略，然后再考虑重构。

如果我没有足够清楚地解释这个问题，我深表歉意，第一次张贴者。

提前感谢您的任何见解。

代码笔： https://codepen.io/dansoutar/pen/RXZREV

主要问题：

function enforceLoop(num) {
  if (num < 0) {
    num === slides.length - 1;
    console.log('num is now the last slide...' + num);
    return num;
  } else if (num > slides.length - 1) {
    num === 0;
    console.log(num + '...should be zero!!');
    return num;
  } else {
    console.log('enforce loop = num is ...' + num);
    return num;
  }

}

Answer 1

在 Javascript 中，=== 用于相等性检查，因此每个 if 案例开头的行将 num 与 slides.length - 1 和 [=14= 进行比较] 分别;他们不分配给 num。在这两个地方将 === 更改为 =，enforceLoop 应该可以正常工作。

更正后的代码：

function enforceLoop(num) {
  if (num < 0) {
    num = slides.length - 1;
    console.log('num is now the last slide...' + num);
    return num;
  } else if (num > slides.length - 1) {
    num = 0;
    console.log(num + '...should be zero!!');
    return num;
  } else {
    console.log('enforce loop = num is ...' + num);
    return num;
  }
}

Answer 2

num === slides.length - 1;、num === 0;

=== 是相等运算符。您要使用赋值运算符 =.

当计数器变量大于数组的长度时，将计数器变量从零重新启动的功能——不起作用

Function to restart a counter variable at zero when it is greater than an array's length -- not working

javascript

control-flow