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

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对象。您需要删除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); 

Answer 2

问题是你有启动的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); 
     }