Question

我有一个JQuery滑块，只要页面加载就会自动启动。我也有next（nextSlide函数）和previous（prevSlide函数）按钮。我想要完成的是......我想在$('#next').on('click',nextSlide);或$('#prev').on('click',prevSlide);被激活时停止'autoSwitch'。

换句话说，自动切换适用于页面加载，但只要用户点击“下一个”或“上一个”按钮就会停止。

$(document).ready(function() {
var autoSwitch = true;          // auto slider
var autoswitch_speed = 4000;    // auto slider speed

// Add initial active class
$('.slide').first().addClass('active');

// Hide slides
$('.slide').hide();

// Show first slide
$('.active').show();

// Next handler
$('#next').on('click',nextSlide);

// Previous handler
$('#prev').on('click',prevSlide);

// AutoSwitch handler
if (autoSwitch == true) {
    setInterval(nextSlide,autoswitch_speed);
}

// Switch to next slide
function nextSlide () {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
        $('.slide').first().addClass('active');
    } else {
        $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
}

// Switch to prev slide
function prevSlide () {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
        $('.slide').last().addClass('active');
    } else {
        $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
}
});

Answer 1

当您运行MyParent存储对它的引用时：

setInterval

然后当您的方向按钮被清除时间间隔：

var intervalID = setInterval(nextSlide,autoswitch_speed);

（注意：此onclick处理程序必须位于$('#next, #prev').on('click', function(){ clearInterval(intervalID); });函数中，才能拥有$(document).ready变量的范围

在$（document）.ready函数中停止JQuery函数

1 个答案: