时间戳

首页 > 解决方案 > 尝试遍历图像数组，但代码仅显示数字 1（甚至不显示数字 0）

javascript - 尝试遍历图像数组，但代码仅显示数字 1（甚至不显示数字 0）

问题描述

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

此外，更令人困惑的是，它甚至不显示数组的元素 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';
})

标签： javascriptarraysimageloops

解决方案

// 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';
  });
})();
  1. 当鼠标进入元素时，将图片调整为pic 0。
  2. 调整好图片后，为下一张图片启动超时3秒
  3. 通过图片的数量对索引进行模数，以便索引循环
  4. 当鼠标离开元素时，清除超时并重置背景

推荐阅读