애니메이션 일시 중지 onClick

Question

표시 할 이미지를 지정하는 data-slides 속성이있는 페이지의 각 div를 통과하는 다음 코드가 있습니다. 그것은과 그들을 페이딩에 의해 루프에 다른 이미지를 애니메이션을

(function($) { 
'use strict'; 
$('[data-slides]').each(function(){ 
     var $slides = $(this); 
     var images = $slides.data('slides'); 
     var count = images.length; 
     var number = 0; 
     var slideshow = function() { 
      $slides 
       .css('background-image', 'url("' + images[number%count] + '")') 
       .show(0, function() { 
        setTimeout(slideshow, 3500); 
       }); 
       number++; 
     }; 

     slideshow(); 
    }); 
}(jQuery)); 

는 내가 뭘 원하는 다시 한 슬라이드 쇼 애니메이션을 시작 애니메이션있어 특정 요소를 일시 정지 버튼을 누른 다음 다른 버튼이 있습니다. 어떻게해야합니까? 감사! 플래시 천둥의 제안을 사용

편집

, 나는 일시 정지 할 수있는 별도의 타이머를 업데이트했습니다 :이 작동

function Timer(callback, delay) { 
    var timerId, start, remaining = delay; 

    this.pause = function() { 
     window.clearTimeout(timerId); 
     remaining -= new Date() - start; 
    }; 

    this.resume = function() { 
     start = new Date(); 
     window.clearTimeout(timerId); 
     timerId = window.setTimeout(callback, remaining); 
    }; 

    this.resume(); 
} 

function runSlideshow(div){ 
    var $slides = div; 
    var images = $slides.data('slides'); 
    var count = images.length; 
    var number = 0; 
    this.slideshow = function() { 
     $slides 
      .css('background-image', 'url("' + images[number%count] + '")') 
      .show(0, function() { 
       timer.resume(); 
      }); 
      number++; 
    }; 
    var timer = new Timer(this.slideshow, 3500); 

    this.slideshow(); 
} 

(function($) { 
    'use strict'; 
    $('[data-slides]').each(function() { 
      var run = new runSlideshow($(this)); 
      run.slideshow(); 
    }); 
}(jQuery)); 

그러나, 나는 할 수 있어야합니다 타이머를 잠시 멈추게하려면 $('[data-slides]')에서 타이머에 액세스하십시오. 내가 어떻게 할 수있는?

Answer 1

function Timer(callback, delay) { 
    var timerId, start, remaining = delay; 

    this.pause = function() { 
     window.clearTimeout(timerId); 
     remaining -= new Date() - start; 
    }; 

    this.resume = function() { 
     start = new Date(); 
     window.clearTimeout(timerId); 
     timerId = window.setTimeout(callback, remaining); 
    }; 

    this.resume(); 
} 

var timer = new Timer(function() { 
    alert("Done!"); 
}, 1000); 

timer.pause(); 
// Do some stuff... 
timer.resume(); 

신용 : Tim Down.