javascript - 我需要做什么才能创建幻灯片

Question

向正在阅读本文的人问好。我是一名学习计算机科学的学生，对于本学期的毕业元素，我必须编写一个 3 页的网页。第一页包含一个由 3 张图像组成的幻灯片放映，图像应该每 5 秒循环一次，我在试图弄清楚其背后的逻辑时遇到了麻烦。我创建了一个 div，并在其中放置了 3 个图像，还创建了一个数组来保存这 3 个图像，我希望得到任何有用的提示/技巧。这段代码不完整，但这是我到目前为止在逻辑上所能想到的。

function imageCaller(){
  const images = ["opportunity.jpg", "Yu-Yu-Hakusho.png", "Bloodborne.jpg"];
  img.src = images[0];

  for (let images=0; images< images.length; images++)
}
function imageTimer() {
  let timer = setInterval(imageCaller, 5000);
}

Answer 1

尝试制作一个持久变量来跟踪数组的当前索引 - 当前显示的图像。然后，在每次迭代中(每次调用函数时)，递增索引，并在需要时循环回到 0。

const imageCaller = (() => {
  const images = ["opportunity.jpg", "Yu-Yu-Hakusho.png", "Bloodborne.jpg"];
  let index = 0;
  return () => {
    img.src = images[index];
    index = (index + 1) % images.length;
  };
})();

function imageTimer() {
  let timer = setInterval(imageCaller, 5000);
}

(() => { 和 })(); 用于创建函数自己的自包含范围 - 封装 images 和 index 变量。它们仅对 imageCaller 有用，因此最好避免污染全局命名空间。如果您不想这样做，可能更容易理解的替代方法是:

const images = ["opportunity.jpg", "Yu-Yu-Hakusho.png", "Bloodborne.jpg"];
let index = 0;
function imageCaller(){
  img.src = images[index];
  index = (index + 1) % images.length;
}
function imageTimer() {
  let timer = setInterval(imageCaller, 5000);
}