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的功能以外的工作正常。