Question

我有一个连续循环的交替图像，我希望能够中断并显示一个与当前显示的图片对应的新图片，使用onmouseover效果，只要鼠标在图像上。

作为更好地描述我的问题的一个例子，我想每五秒在屏幕上交替出现一堆图像（我已经可以做了）。然后，当鼠标悬停事件发生时，让图像停止交替并显示与刚刚显示的图像对应的新图像（它将是描述刚刚显示的图像的另一图像）。我还希望图像在鼠标悬停在图像上时停止交替。

到目前为止，我可以获得第一张图像来显示其相应的图像，但我似乎无法让其他图像工作。此外，当鼠标仍在图像上时，我无法停止交替图像。

这是我到目前为止所拥有的：

<body>

    <img src="image1.jpeg" alt="Image1" width="344" height="311" id="rotator" onmouseover="this.src='imageText1.jpeg'" onmouseout="this.src='image1.jpeg'">



    <script type="text/javascript">
     (function()  {
        var rotator = document.getElementById("rotator");
        var imageDir = '';
        var delayInSeconds = 5;

        var images = ["image2.png", "image3.gif", "image4.png", "image5.jpeg","image6.gif", "image7.jpeg", "image1.jpeg"];

        var num = 0;
        if (rotator.onmouseover ==  )
        var changeImage = function()  {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len)  {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    })();
    </script>

Answer 1

if (rotator.onmouseover ==  )
{

}

如果有条件，我们必须检查一下。空状态是个问题。请检查一下。

使用onmouseover作为

1 个答案: