我试图循环遍历一个图片数组，但代码只显示数组中的一个图片。
此外，更令人困惑的是，它甚至没有显示数组的元素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';
})
// 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秒
- 用图片数量对索引进行模数运算，使索引循环
- 当鼠标离开元素时，清除超时并重置背景