일시 중지 애니메이션 위에 덮여있을 때

Question

이것은 내 첫 번째 게시물이지만 수년 동안이 사이트를 훌륭한 참고 자료로 사용했습니다. 나는 단순히 슬라이드 쇼를 가져 가려 할 때 슬라이드 쇼를 일시 중지하려고합니다. 코드는 다음과 같습니다. jquery 호버를 사용하여 중지했지만 사용하지 못했습니다. 누구든지 아이디어가 있습니까?

$(function() { 
    // create the image rotator 
    setInterval("rotateImages()", 7000); 
}); 

function rotateImages() { 
    var oCurPhoto = $('#photoShow div.current'); 
    var oNxtPhoto = oCurPhoto.next(); 
    if (oNxtPhoto.length == 0) 
     oNxtPhoto = $('#photoShow div:first'); 

    oCurPhoto.removeClass('current').addClass('previous'); 
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, 
     function() { 
      oCurPhoto.removeClass('previous'); 
     }); 
} 

Answer 1

구현중인 방식에서는 var의 회전 상태 만 저장할 수 있습니다. 이 같은

는 :

var canRotate = true; 

$(function() { 
    // create the image rotator 
    setInterval("rotateImages()", 7000); 
}); 

function rotateImages() { 
    if(!canRotate) { return; } 
    var oCurPhoto = $('#photoShow div.current'); 
    var oNxtPhoto = oCurPhoto.next(); 
    if (oNxtPhoto.length == 0) 
     oNxtPhoto = $('#photoShow div:first'); 

    oCurPhoto.removeClass('current').addClass('previous'); 
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, 
     function() { 
      oCurPhoto.removeClass('previous'); 
     }); 
} 

이 잘 작동합니다.

추신 : jQuery 라이브러리에서 .stop() 메서드를 찾을 수도 있습니다. 현재 정지 된 객체에 중단 요청을 보냅니다.

Answer 2

그것은 아마도 추악한하지만이

$(function() { 
    var myTimer = 0; 
    myTimer = setInterval("rotateImages()", 7000); 

    $('#photoShow').mouseover(function() { 
      clearInterval(myTimer); 
     }).mouseout(function(){ 
      myTimer = setInterval("rotateImages()", 7000); 
     }); 
});