jQuery Scrolling SlideShow

Question

현재 처음부터 스크롤 슬라이드 쇼를 만들고 있는데 문제가 생겼습니다.

다음 단추를 여러 번 누르면 슬라이드가 함께 실행되기 시작합니다. 다음 슬라이드가 시작되기 전에 현재 슬라이드가 중지 될 때까지 다음 슬라이드가 대기하는지 어떻게 확인할 수 있습니까?

var scrollAmount=910 
    var image0Left=-scrollAmount; 
    var image1Left=0; 
    var image2Left=scrollAmount; 
    var scrollSpeed0=2000; 
    var scrollSpeed1=2000; 
    var scrollSpeed2=2000; 
    $(document).ready(function() { 
     $("#left-arrow").click(showPreviousSlide); 
     $("#right-arrow").click(showNextSlide); 
    }); 

    function showPreviousSlide(){ 
     image0Left+=scrollAmount; 
     if(image0Left > scrollAmount){ 
      image0Left=-scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left+=scrollAmount; 
     if(image1Left > scrollAmount){ 
      image1Left=-scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left+=scrollAmount; 
     if(image2Left > scrollAmount){ 
      image2Left=-scrollAmount; 
      scrollSpeed2=0; 
     } 

     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

    function showNextSlide() { 
     image0Left-=scrollAmount; 
     if(image0Left < -scrollAmount){ 
      image0Left=scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left-=scrollAmount; 
     if(image1Left < -scrollAmount){ 
      image1Left=scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left-=scrollAmount; 
     if(image2Left < -scrollAmount){ 
      image2Left=scrollAmount; 
      scrollSpeed2=0; 
     } 


     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

모든 것은 제어 스크립트 코드입니다. 다음은 실제 사이트에 대한 링크입니다. Site

showPreviousSlide 또는 showNextSlide가 호출 될 때마다 이동되는 이미지 슬라이드가 세 개 있습니다. showPreviousSlide/showNextSlide 함수의 한 반복이 슬라이드를 다시 호출하기 전에 이동을 완료하도록하려면 어떻게해야합니까? 내 슬라이드 쇼 div overfill을 제거했습니다 : 내 슬라이드 쇼에서 어떤 일이 일어나는지 쉽게 볼 수 있도록 숨김.

도움 주셔서 감사합니다.

모건

당신은 다음과 같이 .animate()에 완료 콜백을 전달할 수 있습니다

Answer 1

:

animationCompleted = false; 
$("#slide0").animate({left: image0Left}, scrollSpeed0, function() { 
    animationCompleted = true; 
}); 

이 그런 다음 기능에 animationCompleted의 값을 확인 :

function showPreviousSlide(){ 
    if (!animationCompleted) return; 
    // ... 
} 

그리고 추가의 docs 체크 아웃 정보 및 예.