Question

我需要帮助让我的图片幻灯片显示正常工作。我将其设置为循环遍历图像阵列，并以5秒的间隔显示每个图像。它实际上做的是遍历整个阵列，但只显示最后一个图像。代码如下：

const imgArray = ['http://media.tumblr.com/tumblr_lf88gg6J5d1qamm7n.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5SG1QIHcwLM9FNPFOO0IvFBNJ9CJCGZ-iGz7zfmfhTypEqqTU','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRZLiRBwwBBMAapL5IzxqoV-zskYuGD9lWvyirUryKjVaRqwlO'];
let index = 0;

function autoChange() {
  let img = document.getElementById('img');
  let arrayIndex;
  for (arrayIndex = 0; arrayIndex < imgArray.length; arrayIndex++) {
    img.src = imgArray[arrayIndex];
    setTimeout(autoChange, 3000);
    console.log(imgArray[arrayIndex]);
  }
  arrayIndex++;
  if(arrayIndex > imgArray.length) {
    arrayIndex = 0
  };
}

autoChange();

<section>
  <figure>
    <img id='img' class='displayed-img' width="350" src="imgs/pic0.jpg">
  </figure>
</section>

谢谢。

Answer 1

JavaScript在单线程环境中运行（在任何给定时刻只能执行一个任务）。你正在努力减缓＆＃34;你的循环有一个定时器，但定时器的回调函数只会在当前函数（以及调用堆栈上的所有其他代码）完成后执行。所以，你的循环运行完成然后调用计时器。

因此，您不应该尝试在循环内使用计时器。相反，将计数器保留在函数范围之外，并在每次函数调用时递增计数器。然后，让计时器再次调用该函数 - 这将创建您正在寻找的循环效果，而不需要实际的循环。

＆＃13;

const imgArray = ['http://media.tumblr.com/tumblr_lf88gg6J5d1qamm7n.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5SG1QIHcwLM9FNPFOO0IvFBNJ9CJCGZ-iGz7zfmfhTypEqqTU','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRZLiRBwwBBMAapL5IzxqoV-zskYuGD9lWvyirUryKjVaRqwlO'];

let index = 0;  // This will keep track of the current array index to use
let img = document.getElementById('img'); // Get your reference just once, not on each function call

function autoChange() {
  // You only need to ensure that the index isn't out of bounds
  if(index < imgArray.length){
    img.src = imgArray[index];      // If not, use the index
    index++;                        // Then, increment it
    console.clear();
    console.log(imgArray[index]);
  } else {
    index = 0;  // If so, reset the index
  }
  // Now that the right image is showing, wait 3 seconds and call the function all over again
  setTimeout(autoChange, 3000);  
}

autoChange();

＆＃13;

<section>
  <figure>
    <img id='img' class='displayed-img' width="350" src="imgs/pic0.jpg">
  </figure>
</section>

＆＃13;

Answer 2

你走在正确的轨道上，做了一点改变

＆＃13;

const imgArray = ['http://media.tumblr.com/tumblr_lf88gg6J5d1qamm7n.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5SG1QIHcwLM9FNPFOO0IvFBNJ9CJCGZ-iGz7zfmfhTypEqqTU','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRZLiRBwwBBMAapL5IzxqoV-zskYuGD9lWvyirUryKjVaRqwlO'];
var index = 0;

function autoChange() {
  let img = document.getElementById('img');
  if (index >= imgArray.length)
  index = 0;
  else index++
  
 img.src= imgArray[index] 

 setTimeout(autoChange, 3000);
}

autoChange();

＆＃13;

<section>
  <figure>
    <img id='img' class='displayed-img' width="350" src="imgs/pic0.jpg">
  </figure>
</section>

＆＃13;

使用纯javascript循环遍历图像数组

2 个答案: