暫停/停止計數器在最後一張幻燈片

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/（搜索關於「改動後」）