JavaScript定時器 - 清除，設置新的，通過div騎車

Question

我有一些JavaScript循環訪問n個div標籤，每次只顯示一個，每10秒更改一次。這是行得通的。但我也有下一個和上一個按鈕。當我點擊下一個或上一個時，他們似乎跳過了一個div。

有人可以幫忙嗎？

任何建議更好的方式來做到這一點也是受歡迎的。我是jQuery的新手，所以我知道我想要做的一些改進。謝謝！！！

jQuery(document).ready(function() { 
    var counter = 1; 
    var delay = 3000; //10 seconds = 10000 
    var lastItem = jQuery('table[id^=featuredNo]').length - 1; 
    var previous = 0; 
    var timerID; 

    //argument is increment 
    //false is decrement 
    function updateCounter(increment) { 
     if (increment) { 
      counter = (counter >= lastItem) ? 0 : counter + 1; 
      previous = (previous >= lastItem) ? 0 : previous + 1; 
     } else { 
      counter = (counter <= 0) ? lastItem : counter - 1; 
      previous = (previous <= 0) ? lastItem : previous - 1; 
     } 
    } 

    function displayNext() { 
     //alert("testt" + counter); 

     //hide everything but current 
     jQuery("table[id^=featuredNo]").hide(); 
     jQuery("#featuredNo" + counter).show(); 

     //incrememnt the counter, so next time we show the next one 
     updateCounter(true); 
    }; 

    //set click handlers for previous 
    jQuery('a[id^=featuredPrevious]').click(function() { 
     clearInterval(timerID); 

     updateCounter(false); 

     displayNext(); 
     timerID = setInterval(displayNext, delay); 
    }); 

    //set click handlers for next 
    jQuery('a[id^=featuredNext]').click(function() { 
     clearInterval(timerID); 

     updateCounter(true); 

     displayNext(); 
     timerID = setInterval(displayNext, delay); 
    }); 


    //start interval 
    timerID = setInterval(displayNext, delay); 
}); 

Answer 1

最簡單的辦法從你的下一個按鈕處理程序刪除updateCounter（真），並增加了一個updateCounter（假）到你的上一個按鈕處理程序：

//set click handlers for previous 
jQuery('a[id^=featuredPrevious]').click(function() { 
    clearInterval(timerID); 

    updateCounter(false); 
    updateCounter(false); 

    displayNext(); 
    timerID = setInterval(displayNext, delay); 
}); 

//set click handlers for next 
jQuery('a[id^=featuredNext]').click(function() { 
    clearInterval(timerID); 

    displayNext(); 
    timerID = setInterval(displayNext, delay); 
});