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