無法更改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); 
     }