使用onmouseover作爲

我有一個連續的交替圖像循環，我希望能夠中斷並顯示與當前顯示的圖片相對應的新圖片，只要鼠標位於圖像上，使用onmouseover影響。使用onmouseover作爲

作爲一個更好地描述我的問題的例子，我希望每隔5秒在屏幕上交替出現一堆圖像（我已經可以做到這一點）。然後，當鼠標懸停事件發生時，讓圖像交替停止並顯示與剛剛顯示的圖像相對應的新圖像（它將是另一張描述剛剛顯示的圖像的圖像）。我還希望圖像在鼠標懸停在圖像上時停止交替。

到目前爲止，我可以得到第一張圖片來顯示其相應的圖像，但我似乎無法讓剩下的工作。此外，當鼠標仍在圖像上時，我無法讓交替圖像停止。

這是我到目前爲止有：

<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>

來源

2012-09-24 Kyle Killebrew