javascript - jQuery自定义 slider 上一个下一个导航跳转多步

Question

我是一名 jQuery(和一般编程)学习者，我尝试构建自己的图像 slider /循环，而不是使用插件，既保持代码小，又有助于学习。

我的函数在 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'));

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