Jquery JavaScript定时器-清除、设置新的、在div中循环

我有一些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);
});

jQuery（文档）.ready（函数（）{
var计数器=1；
变量延迟=3000；//10秒=10000
var lastItem=jQuery（'table[id^=featuredNo]'）。长度为-1；
var-previous=0；
var-timerID；
//参数是增量
//虚假就是减量
函数更新计数器（增量）{
如果（增量）{
计数器=（计数器>=lastItem）？0：计数器+1；
上一个=（上一个>=lastItem）？0：上一个+1；
}否则{
计数器=（计数器最简单的解决方案是从下一个按钮处理程序中删除updateCounter（true），并向上一个按钮处理程序中添加另一个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);
});

我有点困惑，为什么我在前进的过程中必须两次递减而不是递增。你能解释一下吗？我猜，自从我写代码以来，我只是忽略了我创建的一个bug。不管怎样，我永远感激！谢谢！displayNext（）调用updateCounter（true）本身。由于您在下一个按钮处理程序中也调用了updateCounter，因此它将计数器增加了两次，从而跳过了一个div。此外，要显示上一个div，您必须将计数器向后移动两次，因为仅向后移动一次只会反复显示同一个div。看起来我在更新按钮之前正在显示下一个div算了吧，但你的修正成功了！所以我相信你的话。再次感谢你