javascript - 悬停时更改图像

Question

我有一个包含 x 数量图像的网页，当我将鼠标悬停在图像上时，我想让它每秒更改为列表中的图像。

这是我想出的:<强> Fiddle

var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

但是这有两个问题，

• 我想在 html 中包含所有图像链接，例如:<img src="img1.png"><img src="img2.png">等包含在 div 中并使其可见或不可见(认为这是最好的方法)。
• 而且我只需要在将鼠标悬停在图像上时发生这种情况。

你们有什么想法吗？我不需要代码，只需朝着正确的方向插入 :)

澄清一下:我在一个页面上有 x 数量的图像，比方说 25，当我将鼠标悬停在需要开始更改的 25 个中的一个上时，我不能有 1 个包含图像的列表(比如答案)，因为每张图片(共 25 张)都有不同的列表。

Answer 1

JSFiddle

 var images = [];
    images[0] = "img1.png";
    images[1] = "img2.png";
    images[2] = "img3.png";
    images[3] = "img4.png";
    images[4] = "img5.png";
    images[5] = "img6.png";

    var interval;
    var i = 0;

    $(function () {
        $("img").mouseover(function () {
            interval = setInterval(fadeDivs, 1000);
        })
       .mouseout(function () {
                clearInterval(interval);

        });
    });

    function fadeDivs() {
        i = i < images.length ? i : 0;
        $('img').fadeOut(100, function() {
            $(this).attr('src', images[i]).fadeIn(100);
        });
        i++;
    }