试图遍历一组图像，但代码只显示数字 1（甚至不是数字 0）答案

【问题标题】：trying to loop through an array of images but code only displays the number 1 (not even number 0)试图遍历一组图像，但代码只显示数字 1（甚至不是数字 0）
【发布时间】：2021-04-03 04:57:45
【问题描述】：

我正在尝试遍历图片数组，但代码只显示数组中的一张图片。

此外，更令人困惑的是，它甚至不显示数组的元素 0，而是显示元素 1。

我一直在阅读有关 setTimeOut 和其他方法的信息，但我还没有真正理解逻辑（javascript 新手）。

我的最终目标是当鼠标悬停在所选元素上时，在特定时间内显示一系列图片（如视频中的照片）。

这是我的代码：

let aboutMePics = ["url('./img/aboutMeStill01.png')", "url('./img/aboutMeStill02.png')"] 

const aboutMe = document.getElementById("aboutMe")
aboutMe.addEventListener("mouseover", function(){
    for (let i = 0; i < aboutMePics.length; i++) {
        document.body.style.background = aboutMePics[i];
    }
})

aboutMe.addEventListener("mouseout", function(){
    document.body.style.background = 'initial';
})

【问题讨论】：

每次迭代都会替换正文样式背景。
这是一件坏事吗？这正是我想做的。
您的问题是要显示多张图片。替换一张图片，同时显示多张图片，是完全不同的两件事
@Taplar “我的最终目标是在特定时间内显示一系列图片（如视频中的照片）......”
所以目标是制作一个伪幻灯片。

标签： javascript arrays image loops

【解决方案1】：

// IIFE just for a reduced scope
(function() {
  const aboutMePics = ["url('./img/aboutMeStill01.png')", "url('./img/aboutMeStill02.png')"];
  const aboutMe = document.getElementById("aboutMe");
  let timeout;
  
  function adjustPicture(index) {
    document.body.style.background = aboutMePics[index];
    
    timeout = setTimeout(() => adjustPicture(++index % aboutMePics.length), 3000);
  }

  aboutMe.addEventListener('mouseenter', function(){
    adjustPicture(0);
  });
  
  aboutMe.addEventListener("mouseleave", function() {
    clearTimeout(timeout);
    document.body.style.background = 'initial';
  });
})();

鼠标进入元素后，将图片调整为pic 0。
调整图片后，为下一张图片启动超时3秒
以图片的数量对索引进行模数，以便索引循环
当鼠标离开元素时，清除超时并重置背景

【讨论】：