如何在最終幻燈片中停止該滑塊？

Question

我有一個不停止自動播放的旋轉木馬文本。有沒有辦法讓它停止在最後的話？這裏是我已經編輯它做你想要的代碼http://codepen.io/anon/pen/kyiqn

(function() { 
    rt.Homepage = function() { 
     function e() { 
      var e = this; 
      this.currentCaption = 0, this.$carousel = $(".js-carousel"), this.$captions = $(".js-captions"), this.switchCaption(1), setInterval(function() { 
       return e.advanceCaption() 
      }, 2000), this.addHandlers() 
     } 
     return e.prototype.addHandlers = function() {}, 

     e.prototype.advanceCaption = function() { 
      var e, t; 
      return this.currentCaption++, t = 20, e = this.currentCaption % t + 1, this.switchCaption(e) 
     }, e.prototype.switchCaption = function (e) { 
      var t, n, r, i, s, o, u = this; 
      n = "state-1 state-2 state-3 state-4 state-5 state-6 state-7 state-8 state-9 state-10 state-11 state-12 state-13 state-14 state-15 state-16 state-17 state-18 state-19 state-20", this.$carousel.removeClass(n).addClass("state-" + e), o = this.$captions; 
      for (i = 0, s = o.length; i < s; i++) t = o[i], r = $(".caption-" + e, t).width(), $(t).width(r); 
      return _.delay(function() { 
       return u.$carousel.addClass("show-caption") 
      }, 500) 
     }, e 
    }(), $(function() { 
     return new rt.Homepage 
    }) 
}).call(this); 

Answer 1

，和我做的JavaScript（略）更清晰的，所以你可以看到發生了什麼事情。如果您確實有未縮小的JavaScript，我會建議對其進行類似的編輯。

CodePen

(function() { 
    rt.Homepage = function() { 
     function e() { 
      var e = this; 
      this.currentCaption = 0; 
      this.$carousel = $(".js-carousel"); 
      this.$captions = $(".js-captions"); 
      this.switchCaption(1); 

      // set a variable for the interval, so we can stop it later 
      this.interval = setInterval(function() { 
       return e.advanceCaption() 
      }, 1500); 

      this.addHandlers(); 
     } 

     e.prototype.addHandlers = function() {} 

     e.prototype.advanceCaption = function() { 
      this.currentCaption++; 

      // if currentCaption reaches final caption, stop the interval 
      if (this.currentCaption >= 4) { 
       clearInterval(this.interval) 
      } 

      return this.switchCaption(this.currentCaption + 1); 
     } 

     e.prototype.switchCaption = function (e) { 
      var t, n, r, i, s, o, u = this; 
      n = "state-1 state-2 state-3 state-4 state-5"; 
      this.$carousel.removeClass(n).addClass("state-" + e); 
      o = this.$captions; 
      for (i = 0, s = o.length; i < s; i++) t = o[i]; 
      r = $(".caption-" + e, t).width(), $(t).width(r); 
      return _.delay(function() { 
       return u.$carousel.addClass("show-caption") 
      }, 500) 
     } 

     return e; 
    }(), $(function() { 
     return new rt.Homepage 
    }) 
}).call(this);