JavaScriptタイマー - クリア、設定の変更、divのサイクリング

Question

n個のdivタグを循環し、一度に1つしか表示されず、10秒ごとに変更されるJavaScriptがあります。これは機能しています。しかし、次のボタンと前のボタンもあります。私は次または前をクリックすると、1つの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（true）を除去し、そしてあなたのPREVボタンハンドラに別のupdateCounter（false）を追加します。

//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); 
});