Question

我为滑块编写了一个脚本。在我的代码中，我定义了一个名为autoswitch的变量，其默认值为true，如果autoswitch == true，幻灯片将会更改。但我想要如果用户点击幻灯片的箭头，autoswitch会更改为false。我的代码如下：

$(document).ready(function () {
// Initiate variables
var speed = 500;
var autoswitch = true;
var autoswitch_speed = 5000;

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

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

$('.slide').first().show();

$('#next').click(function () {
    autoswitch = false;
    $('.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);
});
$('#prev').click(function () {
    autoswitch = false;
    $('.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);
});

if(autoswitch){
    setInterval(function () {
        $('.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);
    }, autoswitch_speed);
}
});

我有两个滑块箭头，两个都在点击，在功能的第一行更改autoswitch = false;的值，但这个技巧不起作用，即使点击箭头后，幻灯片自动切换！我怎样才能解决我的问题？

Answer 1

问题是你已经启动了setInterval所以要停止你需要在箭头上调用clearInterval点击

尝试以下适合您的代码

$(document).ready(function () {
    // Initiate variables
    var speed = 500;
    var autoswitch = true;
    var autoswitch_speed = 5000;

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

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

    $('.slide').first().show();

    $('#next').click(function () {
        clearInterval(cleanVar);
        $('.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);
    });
    $('#prev').click(function () {
        clearInterval(cleanVar);
        $('.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);
    });



      var cleanVar =  setInterval(autoScroll, autoswitch_speed);

    });

    function autoScroll() {
            $('.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);
        }

Answer 2

这种情况正在发生，因为您已经在页面加载时创建了setInterval对象。您需要删除timer object

上的autoswitch = false

您需要将代码更新为

var refreshIntervalId = setInterval(function () {
    $('.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);
}, autoswitch_speed);

在autoswitch = false

上调用它

clearInterval(refreshIntervalId);

无法在JQuery函数中更改变量的值

2 个答案: