如何使用的setInterval和clearInterval一個簡單的幻燈片的jQuery

Question

i managed to get a simple slideshow working具有兩個主要的「特徵」：

• 自動滑動到下一圖像

• 表示上點擊根據指示器所需的圖像

的間隔設定在5秒鐘後，顯示下一個圖像。但是，當我通過點擊指示器選擇特定圖像時，應該重置此計時器，以便在顯示下一圖像之前顯示所需圖像5秒鐘。現在計時器不復位，它可能會發生，我只能看着了很短的時間內圖像......到目前爲止，我有以下幾點：

$('#keyvisualslides li:first-child').show(); 
$('#keyvisualpager li:first-child a').addClass('keyvisualactive'); 


var reload = setInterval(function(){ 
    // get position of a element 
    var mbr_total = $('#keyvisualpager li a').length; 
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 2; 

    if (mbr_targetkeyvisual > mbr_total) { 
     mbr_targetkeyvisual = 1; 
    } 

    // hide current image and show the target image 
    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); 

    // remove active class from current indicator and add the same class to target indicator 
    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

}, 5000); 


$('#keyvisualpager li a').click(function() { 

    var mbr_index = $(this).parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 1; 

    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() 

    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

    //   
    // from now on wait 5 seconds until next image is automatically displayed 
    // 

}); 

BTW：我已經使用jquery 1.2。 1，沒有其他版本可能。

非常感謝

Answer 1

$('#keyvisualslides li:first-child').show(); 
$('#keyvisualpager li:first-child a').addClass('keyvisualactive'); 

function showNextImage(){ 
    // get position of a element 
    var mbr_total = $('#keyvisualpager li a').length; 
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 2; 

    if (mbr_targetkeyvisual > mbr_total) { 
     mbr_targetkeyvisual = 1; 
    } 

    // hide current image and show the target image 
    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); 

    // remove active class from current indicator and add the same class to target indicator 
    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

} 

var reload = setInterval(showNextImage, 5000); 


$('#keyvisualpager li a').click(function() { 
    clearInterval(reload); 

    var mbr_index = $(this).parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 1; 

    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() 

    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

    reload = setInterval(showNextImage, 5000); 

});