Question

我正在尝试使用setInterval来启动，停止和重新启动定时滑块。滑块1）在幻灯片中淡出/淡出，2）滑块底部的转换页面按钮。我的代码如下：

var sliderEl = $('div.slider-container'),
    pagerNav = $('div.slider-container div.pager-container nav.pager'),
    slidePosition = 1,
    slideCount = sliderEl.find('img.slide').length,
    sliderInt;

var slider = function(status){
    var nextSlide = function(){
        pagerNav.find('button.slide-select').removeClass('selected');
        sliderEl.find('div.slides div.slide').fadeOut(300);
        if(slidePosition === slideCount){
            pagerNav.find('button.slide-select[id=p0]').addClass('selected');
            sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
            slidePosition = 1;
        } else {
            sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
            pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
            slidePosition++;
        }
    }

    if(status === 'start') {
        sliderInt = setInterval(nextSlide, 2000);
    } else if(status === 'next') {
        nextSlide();
    }

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

slider('start');

滑块启动，setInterval工作正常;我遇到的问题是当我将鼠标悬停在幻灯片上以“暂停”它（这也有效）然后我将鼠标移开以再次启动它...滑块间隔加倍并开始跳到下一张幻灯片两倍速度。

有人可以帮忙吗？

Answer 1

Jody，我看到你的代码至少有一个问题：每次调用你的函数时都会添加一个新的悬停处理程序。你看，你调用了滑块func并附加了一个悬停处理程序。然后将鼠标移到元素上并将其移出，然后再次调用slider func并附加新的悬停处理程序。现在有2个处理程序。因此，当下次再次执行时，将会调用2个hanlders，并且此代码也会被调用两次：

sliderInt = setInterval(nextSlide, 2000);

我的建议是将初始化代码移到单独的命令中，并添加检查double＆＃39; start＆＃39;呼叫。像这样：

if (sliderInt) clearInterval(sliderInt);

整个解决方案是：

var slider = function(status) {

var nextSlide = function(){
    pagerNav.find('button.slide-select').removeClass('selected');
    sliderEl.find('div.slides div.slide').fadeOut(300);
    if(slidePosition === slideCount){
        pagerNav.find('button.slide-select[id=p0]').addClass('selected');
        sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
        slidePosition = 1;
    } else {
        sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
        pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
        slidePosition++;
    }
}

if(status === 'start') {
    if (sliderInt) 
         clearInterval(sliderInt);
    sliderInt = setInterval(nextSlide, 2000);
} else if(status === 'next') {
    nextSlide();
} else if (status === 'init') {

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderInt = null;           

        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

}

你应该只在一个地方调用init：

slider('init');

然后开始

slider('start');

希望这会对你有所帮助。

麻烦启动和停止setInterval

1 个答案: