호버 (hover)에서 기능 일시 중지

Question

나는 자바 스크립트로 작성된 함수를 사용하여 특정 간격으로 반복되는 이미지 배열을 스크롤 할 수있게되었습니다. 이제는 마우스로 가리키면 회전을 일시 중지하여 더 많은 기능을 추가하고 싶습니다. 배열의 이미지 중 하나.

자바 스크립트

(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

당신은 ID가 setInterval을에서 반환 저장하고, 이미지를 가리킬 때 위해 clearInterval에 전달할 수 있습니다.

그래서 마우스를 올리면 선택을 취소하고 마우스를 놓으면 다시 설정합니다.

희망 하시겠습니까?