暫停懸停功能

Question

我有一個用JavaScript編寫的函數，它允許我滾動以特定間隔迭代的圖像數組，現在我想通過在鼠標懸停在任何位置時暫停旋轉來添加更多功能數組中的圖像。

的Javascript

(function() { 
    var rotator = document.getElementById('bigImage'); 
    var imageDir = '../images/headers/'; 
    var delayInSeconds = 5; 
    var images = ['ImageOne.png', 'ImageTwo.png', 'ImageThree.png', 'ImageFour.png', 
     'ImageFive.png', 
     'ImageSix.png']; 
    var num = 0; 
    var changeImage = function() { 
     var len = images.length; 
     bigImage.src = imageDir + images[num++]; 
     if (num == len) { 
      num = 0; 
     } 
    }; 
    setInterval(changeImage, delayInSeconds * 1000); 

})();​ 

Answer 1

使用jQuery：

var rotationRunning = true; 

var changeImage = function() { 
    if (rotationRunning) { 
     var len = images.length; 
     rotator.src = imageDir + images[num++]; 
     if (num == len) 
      num = 0; 
     } 
    } 
}; 

$(rotator).hover(
    function() { rotationRunning = false; }, 
    function() { rotationRunning = true; } 
); 

Answer 2

你可以存儲從setInterval的返回的ID，並在圖像懸停在它傳遞給clearInterval。

因此，在鼠標懸停後，您可以清除，並在鼠標懸停後重新設置。

希望有幫助！