我有一些JavaScript循环遍历n个div标记,每次只显示一个,并且每隔10秒更改一次。这是有效的。但我也有"下一步"one_answers"上一页"按钮。他们似乎跳过一个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);
});
最简单的解决方案是从下一个按钮处理程序中删除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);
});