javascript - javascript 上的鼠标悬停和超时

Question

我的 html 代码中有这个 id:

<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>

当鼠标悬停在图片上时，如何每 3 秒更改一次图片，

鼠标移出后返回原始图片？

Answer 1

您可以创建一个每 3 秒更改一次图像的函数。然后，当您将鼠标悬停在图像上时，调用该函数并启动计时器。当鼠标离开图像时，清除计时器。

var img = document.getElementById( "me" ).getElementsByTagName( "img" )[0];
var images = ["Me.JPG", "new image path", "..."];
var i = 1;
var timer;

function change() {
    img.src = images[i];
    if ( ++i >= images.length ) {
        i = 0;
    }
    timer = setTimeout( change, 3000 );
}

img.onmouseover = function() {
    timer = setTimeout( change, 3000 );
};

img.onmouseout = function() {
    img.src = images[0];
    clearTimeout( timer );
};