clearInterval在圖像滑塊插件

-3

因此，我正在製作圖像滑塊，我希望能夠在我的自動播放定時器的clearInterval（）從我的init函數中放置了我的點擊事件處理程序的分頁模塊。我想這樣做，所以當用戶在自動播放過程中點擊一個點時，它不會中斷圖像旋轉。問題是定時器功能在我的播放功能內，這不在我的init函數內。看下面：clearInterval在圖像滑塊插件

function Plugin(element, options) { 
    this.element = element; 
    this.options = $.extend({}, defaults, options); 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.item = 0; 
    this.init(); 
} 

Plugin.prototype = { 

    init: function() { 

     var base = this; 

     if (this.options.legend === "on") { 
      html = "<div id='legend'/>"; 
      $(this.element).append(this.generateLegend(this.options.images)).find(".img-number").click(function(){ 

       // store index of currently active image 
       base.item = $("#img-container").children(".active").index(); 

       // only animate if the new index is different from the current 
       if (base.item !== $(this).index()) { 

        // call animation effect 
        base.move(base.item, $(this).index()); 

        // add active class to selected index and remove any previous active classes from other indices 
        base.updateIndex("#legend", $(this).index()); 
        base.updateIndex("#img-container", $(this).index()); 

       } 

      }).wrapAll(html); 
     if (this.options.autoplay === "on") { 
      base.play(); 
     } 

     return this; 

    }, 

    updateIndex: function(el, index) { 
     $(el).children().eq(index).addClass("active").siblings().removeClass("active"); 
    }, 

    play: function() { 

     var base = this; 

     setInterval(function() { 

      if (base.item === base.options.images.length-1) { 
       base.updateIndex("#img-container", 0); 
       base.updateIndex("#legend", 0); 
       base.move(base.item, 0); 
       base.item = 0; 
      } 
      else { 
       base.updateIndex("#img-container", base.item+1); 
       base.updateIndex("#legend", base.item+1); 
       base.move(base.item, base.item+1); 
       base.item += 1; 
      } 

     }, base.options.pduration); 

    }, 

    // animation effect for changing image indices 
    move: function(cur, dest) { 
     $("#img-container > img").animate({ 
      "right": "+=" + 100 * (dest-cur) + "%" 
     }, this.options.aduration, this.options.easing); 
    } 

};

我想通過看看其他滑塊如何做，它沒有「作弊」寫這個插件。我想按照我的方式來做，但也是正確的。

來源

2013-07-21 tenub

「作弊」是最好的學習方式！ – mash

看着現有的代碼==作弊，讓別人解決問題！=作弊？ – Imperative

問題是我會看到其他功能，我可能想在稍後寫一些自己的功能。我只想幫助解決這個問題。 – tenub

只需在base var：this.intervalTimer = window.setInterval(...);中保存間隔並在任何需要的地方訪問它。

來源

2013-07-21 06:29:10 Imperative

setInterval()和setTimeout()都返回其可與clearTimeout()和clearInterval()使用的整數，它是用來取消間隔/超時。

在對象實例中保存返回的整數，並在檢測到用戶交互時取消間隔/超時。

來源

2013-07-21 06:30:38 ifunk

clearInterval在圖像滑塊插件

回答

相關問題