暂停/停止计数器在最后一张幻灯片

Question

我的代码在我的网站下面几行：

HTML

<div class="qa"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>Last</div> 
</div> 

<p class="countdown-timer">00:01:00</p> 

的JavaScript/jQuery的

$(document).ready(function() { 
    $('.qa').slick({ 
    infinite: false, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    adaptiveHeight: false, 
    arrows: true, 
    mobileFirst: true, 
    respondTo: 'window', 
    useCSS: true, 
    swipeToSlide: false 
    }); 
}); 

function Stopwatch(config) { 
    // If no config is passed, create an empty set 
    config = config || {}; 
    // Set the options (passed or default) 
    this.element = config.element || {}; 
    this.previousTime = config.previousTime || new Date().getTime(); 
    this.paused = config.paused && true; 
    this.elapsed = config.elapsed || 0; 
    this.countingUp = config.countingUp && true; 
    this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0); 
    this.updateRate = config.updateRate || 100; 
    this.onTimeUp = config.onTimeUp || function() { 
    this.stop(); 
    }; 
    this.onTimeUpdate = config.onTimeUpdate || function() { 
    console.log(this.elapsed) 
    }; 
    if (!this.paused) { 
    this.start(); 
    } 
} 

Stopwatch.prototype.start = function() { 
    // Unlock the timer 
    this.paused = false; 
    // Update the current time 
    this.previousTime = new Date().getTime(); 
    // Launch the counter 
    this.keepCounting(); 
}; 

Stopwatch.prototype.keepCounting = function() { 
    // Lock the timer if paused 
    if (this.paused) { 
    return true; 
    } 
    // Get the current time 
    var now = new Date().getTime(); 
    // Calculate the time difference from last check and add/substract it to 'elapsed' 
    var diff = (now - this.previousTime); 
    if (!this.countingUp) { 
    diff = -diff; 
    } 
    this.elapsed = this.elapsed + diff; 
    // Update the time 
    this.previousTime = now; 
    // Execute the callback for the update 
    this.onTimeUpdate(); 
    // If we hit the time limit, stop and execute the callback for time up 
    if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) { 
    this.stop(); 
    this.onTimeUp(); 
    return true; 
    } 
    // Execute that again in 'updateRate' milliseconds 
    var that = this; 
    setTimeout(function() { 
    that.keepCounting(); 
    }, this.updateRate); 
}; 

Stopwatch.prototype.stop = function() { 
    // Change the status 
    this.paused = true; 
}; 

$(document).ready(function() { 
    /* 
    * First example, producing 2 identical counters (counting down) 
    */ 
    $('.countdown-timer').each(function() { 
    var stopwatch = new Stopwatch({ 
     'element': $(this),    // DOM element 
     'paused': false,     // Status 
     'elapsed': 1000 * 60 * 1,   // Current time in milliseconds 
     'countingUp': false,    // Counting up or down 
     'timeLimit': 0,     // Time limit in milliseconds 
     'updateRate': 100,    // Update rate, in milliseconds 
     'onTimeUp': function() {   // onTimeUp callback 
      this.stop(); 
      $(this.element).html('Times Up'); 

      $(".qa").slick('slickGoTo', $('.qa div').length);  
     }, 
     'onTimeUpdate': function() {  // onTimeUpdate callback 
     var t = this.elapsed, 
      h = ('0' + Math.floor(t/3600000)).slice(-2), 
      m = ('0' + Math.floor(t % 3600000/60000)).slice(-2), 
      s = ('0' + Math.floor(t % 60000/1000)).slice(-2); 
     var formattedTime = h + ':' + m + ':' + s; 
     $(this.element).html(formattedTime); 
     } 
    }); 
    }); 
    /* 
    * Second example, producing 1 counter (counting up) 
    */ 
    var stopwatch = new Stopwatch({ 
    'element': $('.countup-timer'),  // DOM element 
    'paused': false,     // Status 
    'elapsed': 0,      // Current time in milliseconds 
    'countingUp': true,     // Counting up or down 
    'timeLimit': 1000 * 60 * 1,   // Time limit in milliseconds 
    'updateRate': 100,     // Update rate, in milliseconds 
    'onTimeUp': function() {   // onTimeUp callback 
     this.stop(); 
     $(this.element).html('Countdown finished!'); 
    }, 
    'onTimeUpdate': function() {  // onTimeUpdate callback 
     var t = this.elapsed, 
      h = ('0' + Math.floor(t/3600000)).slice(-2), 
      m = ('0' + Math.floor(t % 3600000/60000)).slice(-2), 
      s = ('0' + Math.floor(t % 60000/1000)).slice(-2); 
     var formattedTime = h + ':' + m + ':' + s; 
     $(this.element).html(formattedTime); 
    } 
    }); 
}); 

Example/Demo

当倒数计时器达到0时，它会将传送带的​​当前位置转换为最后一张幻灯片并停止计数器运行。

由于有以前和下一个按钮，这需要包括在我的项目中，用户可能需要手动导航到该位置倒计时完成之前。

如何以及何时可以暂停或停止计数器到达最后一张幻灯片？

Answer 1

您可以收听光滑的afterChange事件，并在处理完毕后根据当前幻灯片位置与总幻灯片计数的比较结果开始或停止秒表。例如：

$('.qa').on('afterChange', function(slick, currentSlide) { 
    if(currentSlide.currentSlide < currentSlide.slideCount - 1) { 
     theStopwatch.start(); 
    } else { 
     theStopwatch.stop(); 
    } 
    }); 

在一个页面的变化，这个片段将暂停在最后一张幻灯片秒表，并恢复它在任何一张幻灯片。

请注意，我参考您的秒表theStopwatch。您需要使您的主秒表能够访问您的事件处理程序。

来源：http://kenwheeler.github.io/slick/（搜索关于“改动后”）