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

Question

我是jQuery（和通用程序設計）學習者，而不是使用插件，而是嘗試構建自己的“圖像”滑塊/循環，以保持代碼小巧並有助於學習。

我的函數在li項之間循環，添加了一個'.show'類，然后在延遲后刪除該類並添加到下一張幻燈片中。 這似乎很好。

我一直在努力添加導航，這將使上一個或下一個移動並停止計時器。

就目前而言，如果我在腳本啟動時立即單擊導航，導航將按預期工作，但是一旦顯示另一張幻燈片的自動功能啟動，導航將跳多個步驟，我不知道為什么會這樣。 我'.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，則可以正常工作。