1

我正在尝试开发一个滑块，如果用户没有点击后退或前进按钮，它每 5 秒更改一次。

但是如果他（用户）这样做了，间隔会触发多次......为什么？

我将 Interval 保存在一个变量中并清除这个变量，所以我不知道为什么这不起作用......但看看你自己：

        jQuery.fn.extend({
wrGallery: function() {
    return this.each(function() {

        //  config
        var wrClassActive = 'galerie_active';
        var wrTime = 5000;
        //  wrAutomaticDirection gibt an, in welche Richtung 
        //  die Gallerie bei automatischem Wechsel wechseln soll (True = vorwärts/rechts)
        var wrAutomaticDirection = true;

        var wr = jQuery(this);
        var wrGalleryContents = wr.find('.galerie_content');
        var wrGalleryContentsFirst = wr.find('.galerie_content:first-child');
        var wrBtnBack = wr.find('#galerie_backward');
        var wrBtnFor = wr.find('#galerie_forward');
        var wrTimer = 0;
        var wrI = 0;
        var wrOldActiveID = 0;

        var wrInit = function() {
            wrGalleryContents.each(function() {
                wrI++;
                jQuery(this).attr('id', wrI);
                jQuery(this).css({
                    display: 'none',
                    opacity: 0
                })
            })

            wrGalleryContentsFirst.css({
                display: 'block',
                opacity: 1
            })
            wrGalleryContentsFirst.addClass('galerie_active')
            wrStartTimer();
        }

        var wrStartTimer = function() {
            wrTimer = setInterval(function() {
                wrChange(wrAutomaticDirection);
            }, wrTime)
        }

        var wrStoppTimer = function() {
            clearInterval(wrTimer);
            wrTimer = 0;
        }

        var wrBackground = function(wrDirection) {
            wrOldActiveID = wr.find('.' + wrClassActive).attr('id');
            wr.find('.' + wrClassActive).removeClass(wrClassActive);

            if (wrDirection) {
                wrOldActiveID++;
                if (wrOldActiveID <= wrI) {
                    wr.find('#' + wrOldActiveID).addClass(wrClassActive);
                } else {
                    wr.find('#1').addClass(wrClassActive);
                }
            } else {
                wrOldActiveID--;
                if (wrOldActiveID <= wrI) {
                    wr.find('#' + wrOldActiveID).addClass(wrClassActive);
                } else {
                    wr.find('#3').addClass(wrClassActive);
                }
            }
        }

        var wrAnimate = function(wrDirection) {
            wrGalleryContents.stop().animate({
                opacity: 0
            }, 500);
            wr.find('.' + wrClassActive).css({
                display: 'block'
            })
            wr.find('.' + wrClassActive).stop().animate({
                opacity: 1
            }, 500);

        }

        var wrChange = function(wrDirection) {
            wrBackground(wrDirection);
            wrAnimate(wrDirection);

        }

        wr.on('mouseenter', function() {
            wrStoppTimer();
        });

        wr.on('mouseleave', function() {
            wrStartTimer();
        });

        wrBtnBack.on('click', function() {
            wrStoppTimer();
            wrStartTimer();
            wrChange(false);
        });

        wrBtnFor.on('click', function() {
            wrStoppTimer();
            wrStartTimer();
            wrChange(true);
        });


        wrInit();

    });
}

});

谢谢阅读 ;-）

4

1 回答 1

2

wrStoppTimer()在开头添加一个调用wrStartTimer：

    var wrStartTimer = function() {
        wrStoppTimer();
        wrTimer = setInterval(function() {
            wrChange(wrAutomaticDirection);
        }, wrTime)
    };

同样在您拥有的两个click功能中：

        wrStoppTimer();
        wrStartTimer();

您可以删除该wrStoppTimer()呼叫，因为wrStartTimer()现在会为您呼叫。

另一件事：如果您以您正在使用的方式定义函数，var name = function() { ... }则应在结束后放置一个分号，}如上面更新的代码中所示。

于 2013-07-09T08:54:06.003 回答