时间戳

首页 > 解决方案 > 我需要做什么才能创建幻灯片

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

问题描述

向正在阅读本文的人问好。我是一名学习计算机科学的学生，对于本学期的退出项目，我必须编写一个 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);
}

标签： javascripthtmlcss

解决方案

尝试创建一个持续变量来跟踪数组的当前索引 - 正在显示的当前图像。然后，在每次迭代中（每次调用函数时），递增索引，并在需要时循环回 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);
}

(() => {and用于创建函数自己的})();自包含范围 - 封装imagesandindex变量。它们只对 有用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);
}

推荐阅读