Question

我是一个jQuery（和一般编程）学习者，而不是使用插件我试图建立我自己的Image滑块/循环，既保持代码小，又有助于学习。

我的函数循环遍历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在函数之外，它可以正常工作。

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

2 个答案: