單擊按鈕以顯示內容的Javascript滑塊

Question

試圖創建自定義JavaScript滑塊，它的想法是它自動循環切換4個div，每個div都有自己的不同內容。另外，在側面還有一個按鈕，當你點擊它時，它會顯示相關的div並停止。

但是目前有三個誤區與此 1.一旦你點擊了一個項目，過了一段時間，一旦你嘗試單擊另一個項目，則將不會把它繼續循環 2。 3.您在頁面上停留的時間越長，它在項目中循環越快。

任何幫助表示讚賞，謝謝！

http://jsfiddle.net/Ek5pQ/

Answer 1

Deestan是正確的，運行的連續環。你不分青紅皁白地創造新的計時器，必須一直在創造加速。這裏是你的代碼（http://jsfiddle.net/Ek5pQ/45/）的簡化版本：

//the variables 
var i = 1; 
var myTimer; 

function myLoop() { 
    //hide everything 
    $(".nHstuff").hide(); 
    $(".nH").removeClass("active"); 
    //show just the stuff we want 
    $("#nHstuff" + i).show(); 
    $("#nH" + i).addClass("active"); 
    //increment variables 
    i++; 

    if (i === 5) { 
     i = 1; 
    } 

    //the timer  
    myTimer = setTimeout(myLoop, 3000); 
} 
//start the loop 
myLoop(); 

//what to do if hovered over an item 
$(".nH").hover(function() { 
    clearTimeout(myTimer); 
    // clear content 
    $(".nHstuff").hide(); 
    $(".nH").removeClass("active"); 
    // show content 
    $("#nHstuff" + (this.id.substr(this.id.length - 1))).show(); 
}); 

$(".nH").mouseout(function() { 
    myLoop(); 
}); 

$(".nH").click(function() { 
    clearTimeout(myTimer); 
    i = this.id.substr(this.id.length - 1, 1); 
    //show just the stuff we want 
    $("#nHstuff" + i).show(); 
    $("#nH" + i).addClass("active"); 
    // To start looping again, call myLoop 
});