jQuery的自定義滑塊上一頁下一頁導航跳多個步驟

Question

我是一個jQuery（和一般的編程）學習者而非使用插件在我試圖建立自己的圖像滑塊/週期，既要保持代碼小，以幫助學習。

我的功能在li項目中循環添加'.show'類，然後在延遲後刪除類並添加到下一張幻燈片。這似乎工作正常。

我一直在掙扎了幾天添加導航，這將上移一個或下一個和停止計時器。現在，如果我在腳本啓動時立即點擊導航，導航將按預期工作，但一旦自動功能顯示另一張幻燈片已啓動，導航將跳轉多個步驟，我不知道這是爲什麼。我以某種方式想象jQuery正在緩存以前有過類似'.show'類的div嗎？

我簡化了我的代碼，並介紹這一在CodePen工作起來：codepen.io/MattyBalaam/pen/vuhyJ

下面是完整的腳本：

function gallery(galleryContainer) { 

    $.fn.nextOrFirst = function(selector) { 
     var next = this.next(selector); 
     return (next.length) ? next : this.prevAll(selector).last(); 
    }; 


    $.fn.prevOrLast = function(selector) { 
     var prev = this.prev(selector); 
     return (prev.length) ? prev : this.nextAll(selector).last(); 

    }; 

    galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>'); 

    var crossFade = function(){ 

     var slideTimeout; 

     function slideWait() { 
      galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show'); 
      slideTimeout = setTimeout(crossFade, 800); 
     } 

    function checkForClicks() { 

     $('div.previous').on('click', function(){ 
      galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show'); 
      window.clearTimeout(slideTimeout); 
     }); 

     $('div.next').on('click', function(){ 
      galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show'); 
      window.clearTimeout(slideTimeout); 
     }); 
    } 

    checkForClicks(); 
    slideWait(); 

}; 

galleryContainer.children(':first-child').addClass('show'); 
setTimeout(crossFade, 800); 
} 

gallery($('ul')); 

Answer 1

問題是，您正在多次調用函數checkForClicks（在每個動畫迭代中），並且事件偵聽器多次添加到按鈕，所以在每次點擊時，您不僅向前/向後移動一次，而且每次向前/向後移動一次動畫步驟，已經顯示。將checkForClicks移到crossFade函數之外，這樣就可以了。

看到代碼： http://codepen.io/anon/pen/ptkea

工作代碼：

function gallery(galleryContainer) { 

$.fn.nextOrFirst = function(selector) { 
    var next = this.next(selector); 
    return (next.length) ? next : this.prevAll(selector).last(); 
}; 

$.fn.prevOrLast = function(selector) { 
    var prev = this.prev(selector); 
    return (prev.length) ? prev : this.nextAll(selector).last(); 
}; 

    galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>'); 

    var slideTimeout; 
    var crossFade = function(){ 
     function slideWait() { 
       galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show'); 
       slideTimeout = setTimeout(crossFade, 800); 
     } 
     slideWait(); 
    }; 

    galleryContainer.children(':first-child').addClass('show'); 
    setTimeout(crossFade, 800); 

    function initButtonEvents() { 

      $('div.previous').on('click', function(){ 
       galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show'); 
      window.clearTimeout(slideTimeout); 
      }); 

      $('div.next').on('click', function(){ 
       galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show'); 
      window.clearTimeout(slideTimeout); 

      }); 
    } 
    initButtonEvents(); 

} 

gallery($('ul')); 

Answer 2

看到我的腳本： http://codepen.io/anon/pen/asvGc

如果你聲明var的功能以外的工作正常。