링크를 클릭하면 기능을 중지합니다. JQuery

Question

페이지로드에서 시작하는 rotatePics()이라는 슬라이드 쇼가 있습니다. 또한 li의 번호를 클릭하면 클릭하면 rel 값이 li이됩니다. li의 rel은 미리로드 된 슬라이드 쇼 이미지의 id과 일치합니다. 따라서 하나를 클릭하면 rotatePics라는 이름의 현재 슬라이드 쇼 함수를 중지하고 다시 시작하지만 새로운 정수를 파싱하려고합니다.

현재 일어나고있는 일은 새로운 슬라이드 쇼 기능을 실행할 수 있지만 페이지가로드 될 때 실행되는 슬라이드 쇼 기능을 대체 할 수 없다는 것입니다.

rotatePics()을 중지하고 변수 number으로 다시 시작하고 후자의 기능 만 실행해야합니다.

$('a.main-img').click(function (e) 
{ 
    e.preventDefault(); 

    var clickedLi = $(this).closest('li').attr('rel'); 

    var number = parseInt(clickedLi); 

    rotatePics(number); 

}); 

이

이 단지 롤링 슬라이드 쇼 및 새로운 이미지를 선택할 수있는 옵션없이 원래했다, 나는 또한 단면 계수는 정수를 변경하는 것을 알고 오전 rotatePics() 기능

function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function(){ 
     $('#banner-holder img').each(function (i) 
     { 
      $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
     }); 

     $(this).show(); 

     setTimeout(function() 
     { 
      rotatePics(++currentPhoto); 
     }, 1000); 
    }); 
}; 

코드입니다.

Answer 1

지우기 시간 제한은 다음과 같이

var rotatePicsTimer; 
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function(){ 
     $('#banner-holder img').each(function (i) 
     { 
      $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
     }); 

     $(this).show(); 

     rotatePicsTimer = setTimeout(function() 
     { 
      rotatePics(++currentPhoto); 
     }, 1000); 
    }); 
}; 

$('a.main-img').click(function (e) 
{ 
    e.preventDefault(); 

    var clickedLi = $(this).closest('li').attr('rel'); 

    var number = parseInt(clickedLi); 

    clearTimeout(rotatePicsTimer); 
    rotatePics(number); 
}); 

Answer 2

setTimeout의 반환 값을 변수에 할당하고 clearTimeout을 호출하기 만하면됩니다.

var timerID; 

// ... 

timerID = setTimeout(function() 
{ 
    rotatePics(++currentPhoto); 
}, 1000); 

// ... 

clearTimeout(timerID);