javascript - 创建一个在鼠标悬停时更改图片的事件

Question

我正在尝试创建一个在鼠标悬停时更改图片的事件。

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

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
                  "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;

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

// setInterval is also in milliseconds

mainImage.mousover = function () {
    var intervalHandle = setInterval(changeImage,1000);
}

myImage.onclick =  function() {
    clearInterval(intervalHandle);
};

mainImage 是 HTML 中的一个对象，changeImage 函数改变当前图片。

我应该如何更改我的代码以使其工作？

Answer 1

删除了中间只有“mainImage.mousover =”的行

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

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
              "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;



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

// setInterval is also in milliseconds

mainImage.onmousover = function () {

    var intervalHandle = setInterval(changeImage,1000);

}

myImage.onclick =  function() {
    clearInterval(intervalHandle);
};