Javascript jQuery自定义滑块上一个下一个导航跳跃多个步骤

我是一名jQuery（和通用编程）学习者，我不使用插件，而是尝试构建自己的图像滑块/循环，以保持代码小，并帮助学习

My function在添加

类的
li
项中循环。show'

类，然后在延迟后删除该类并添加到下一张幻灯片。这似乎很有效

几天来，我一直在努力添加导航功能，它可以上一个或下一个移动，并停止计时器

目前，如果我在脚本启动时立即单击导航，导航将按预期工作，但一旦启动显示另一张幻灯片的自动功能，导航将跳过多个步骤，我不知道这是为什么。我想jQuery正在缓存以前的div，这些div有一个

'。show'

类可能吗

我简化了我的代码和演示文稿，用一个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'));

功能库（galleryContainer）{
$.fn.nextOrFirst=函数（选择器）{
var next=此.next（选择器）；
return（next.length）？next:this.prevAll（selector.last（）；
};
$.fn.prevOrLast=函数（选择器）{
var prev=此.prev（选择器）；
return（prev.length）？prev:this.nextAll（selector.last（）；
};
galleryContainer.parent（）.prepend（'previousnext'）；
var crossFade=函数（）{
var滑出；
函数slideWait（）{
galleryContainer.find（'.show'）.removeClass（'show'）.nextOrFirst（）.addClass（'show'）；
slideTimeout=setTimeout（crossFade，800）；
}   
函数checkForClicks（）{
$（'div.previous'）。在（'click'，function（）上{
galleryContainer.find（'.show'）.removeClass（'show'）.prevOrLast（）.addClass（'show'）；
清除超时（slideTimeout）；
});
$（'div.next'）。在（'click'，function（）上{
galleryContainer.find（'.show'）.removeClass（'show'）.nextOrFirst（）.addClass（'show'）；
清除超时（slideTimeout）；
});
}
checkForClicks（）；
幻灯片（）；
};
galleryContainer.children（“：first child”）.addClass（'show'）；
设置超时（交叉淡入，800）；
}
画廊(美元);；

查看我的脚本：

---

如果您在函数之外声明变量，它可以正常工作。

问题是，您多次调用函数checkForClicks（在每个动画迭代中），并且事件侦听器被多次添加到按钮中，因此在每次单击时，您不仅向前/向后移动一次，而且为每个动画步骤向前/向后移动一次，这已经显示出来了。将checkForClicks移到crossFade功能之外，就可以了

参见代码：

工作代码：

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'));

功能库（galleryContainer）{
$.fn.nextOrFirst=函数（选择器）{
var next=此.next（选择器）；
return（next.length）？next:this.prevAll（selector.last（）；
};
$.fn.prevOrLast=函数（选择器）{
var prev=此.prev（选择器）；
return（prev.length）？prev:this.nextAll（selector.last（）；
};
galleryContainer.parent（）.prepend（'previousnext'）；
var滑出；
var crossFade=函数（）{
函数slideWait（）{
galleryContainer.find（'.show'）.removeClass（'show'）.nextOrFirst（）.addClass（'show'）；
slideTimeout=setTimeout（crossFade，800）；
}   
幻灯片（）；
};
galleryContainer.children（“：first child”）.addClass（'show'）；
设置超时（交叉淡入，800）；
函数initButtonEvents（）{
$（'div.previous'）。在（'click'，function（）上{
galleryContainer.find（'.show'）.removeClass（'show'）.prevOrLast（）.addClass（'show'）；
清除超时（slideTimeout）；
});
$（'div.next'）。在（'click'，function（）上{
galleryContainer.find（'.show'）.removeClass（'show'）.nextOrFirst（）.addClass（'show'）；
清除超时（slideTimeout）；
});
}
initButtonEvents（）；
}
画廊(美元);；

Hi Randy，感谢您的关注，但navgiation似乎仍然表现出我正在尝试治疗的多步跳跃行为。您可以通过等待动画的几个步骤来测试这一点，然后单击导航。autch，您是对的，在非常高兴它工作后没有检查它：谢谢！这就解决了问题。我还需要将“var slideTimeout”移出函数。我已经把密码笔分叉了，以防其他人发现这个问题并寻找答案：