4

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

我的函数循环遍历li添加'.show'类的项目，然后在延迟后删除类并添加到下一张幻灯片。这似乎工作正常。

几天来，我一直在努力添加导航，该导航将移动上一个或下一个并停止计时器。

就目前而言，如果我在脚本启动时立即单击导航，导航将按预期工作，但是一旦显示另一张幻灯片的自动功能启动，导航将跳转多个步骤，我不知道这是为什么。我以某种方式成像 jQuery 正在缓存以前的 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'));
4

2 回答 2

2

问题是，您多次调用函数 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'));
于 2013-04-02T12:20:15.703 回答
0

看我的脚本： http ://codepen.io/anon/pen/asvGc

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

于 2013-04-02T12:17:32.253 回答