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);
}

Answer 2

您可以使用索引变量循环遍历图像源。

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

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

2 个答案: