如何在带有图像的 setInterval 上使用 onmouseover 和 onmouseout 事件设置 if else 函数？

Question

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/1.jpg","_images/2.jpg","_images/3.jpg",
                  "_images/4.jpg","_images/5.jpg","_images/6.jpg"];

var imageIndex = 0;

function changeImage() {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

我正在学习 JS 如何获得像 gif 这样不断变化的图像的基础知识，当你 onmouseover 它时，它会停止，然后 onmouseout，它再次恢复。我在下面的部分苦苦挣扎。

var intervalHandler = setInterval(changeImage, 3000);

myImage.onmouseover = function(){
    clearInterval(intervalHandler);
}

myImage.onmouseout = function(){
    setInterval(changeImage, 3000);
}

Answer 1

这是你的例子？ http://www.w3schools.com/jsref/met_win_cleartimeout.asp

要正确地做到这一点：

//Start initially:
var intervalHandler = setTimeout(changeImage, 3000);

myImage.onmouseover = function(){
    clearInterval(intervalHandler);
}

myImage.onmouseout = function(){
    //reset the variable, so it has the new timeout.
    intervalHandler = setInterval(changeImage, 3000);
}

确保您的 setInterval 函数 returns 超时：

function clearInterval(timeout, period){
   return clearTimeout(callback,period);
}

function myStopFunction(timeout) {
    clearTimeout(timeout);
}

顺便说一下，确保你无限期地循环你想要执行：

intervalHandler = setTimeout(changeImage, 3000);

在您的 changeImage 函数结束时。

如何在带有图像的 setInterval 上使用 onmouseover 和 onmouseout 事件设置 if else 函数？

How to set a if else function with onmouseover and onmouseout event on a setInterval with images?

javascript

if-statement

function

onmouseover