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 />

我有一个调用setTimeout的递归moveCounter函数。 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

var counter = 1;
var imgId = 18;

var op = 1; // the operation -- 1 for addition, -1 for subtraction


function replaceImage(imgId) {
  // increment or decrement the counter, depending
  // on the current direction
  counter += op;

  // use the original poster's snippet to set the active image
  var imgId0 = imgId + counter;
  $('.activeImg').attr('src', 'image/img_'+imgId0+'.jpg');

  // if we hit the upper or lower bound, reverse the direction
  // by flipping the operation
  if (counter === 5 || counter === 1)
    op *= -1;
}

Answer 2

似乎您正在寻找的是一个简单的triangle wave 你可以很容易地生成一个：

＆＃13;

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

＆＃13;

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

＆＃13;

增量计数器然后在达到某个限制时重置该计数器

2 个答案: