javascript - 递增计数器然后在达到一定限度时重置该计数器

Question

我有 18 张图片，我只想在任何给定时间显示其中的 5 张。我每两秒左右换出一张新图像而不显示重复图像。我的 HTML 是硬编码的，并且是从 s3 存储桶中提取的。

<img class="activeImg" src="img_1.jpg />  
<img src="img_2.jpg />
<img src="img_3.jpg />
<img src="img_4.jpg />
...
<img src="img_9.jpg />

我有一个调用 moveCounter 的递归 setTimeout 函数。 moveCounter 每次调用时简单地增加 1，并替换图像。我通过将 activeImg 类添加到 img 来连接元素，然后在移动到下一个图像之前将其删除。

最终目标是从 0...5 开始计数，然后倒退到 5...0，无限次。我所做的只是将值附加到图像名称，从而替换图像而不显示重复项。

问题是存在重叠，每当 counter === imgId 时我都会得到一个副本。

// my recursive settimeout function fires off and adds an activeImg class to a random image element, then also fires off the replaceImage function

var counter   = 0;
var imgId     = 18;

  // increment counter and append new img
  function replaceImage(imgId){

     if (counter >= 9) {
      counter--;
      var imgId = imgId - counter;
    } else {
      counter++;
      var imgId = imgId - counter;
    }

    jQuery('.activeImg').attr('src', "image/img_"+imgId+".jpg");

    console.debug(counter)
    console.debug(imgId)

  }

我觉得有更好的方法来解决这个问题。

Answer 1

看来您正在寻找的是一个简单的 triangle wave .
您可以很容易地生成一个:

var a = 5;
var output = [];

for (var i = 0; i < 20; i++) {
  output.push(a - Math.abs(i % (2 * a) - a));
};
out.innerHTML = output;

<span id="out"></span>