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);
});
I have some JavaScript that cycles through n div tags, displaying only one at a time, and changes every 10s. This is working. But I also have next and previous buttons. They seem to be skipping one div when I click next or previous.
Can someone help?
Any suggestions on a better way to do this is also welcome. I'm new to jQuery so I know some improvements I'd like to do anyway. Thanks!!!
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);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
最简单的解决方案是从下一个按钮处理程序中删除 updateCounter(true) ,并将另一个 updateCounter(false) 添加到上一个按钮处理程序中:
The simplest solution removes updateCounter(true) from your next button handler, and adds another updateCounter(false) to your prev button handler: