当用户单击任何数字时停止计时器/自动流程
我有一个滑块,可以使用以下代码在不同的 div 之间很好地旋转:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
function showSlide(integer) {
$('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn();
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn();
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
setTimeout(function() {showSlide((integer % 5) + 1);}, 5000);
}
setTimeout(function() { showSlide(2); }, 5000);
});
</script>
当用户单击任何选项卡时,滑块会跳转到该选项卡,但计时器会继续计数,并在不到 5 秒的时间内自动继续自动流动到它所在的位置曾是。
当用户单击任何选项卡时,如何使计时器停止?
I have a slider that rotates between different divs nicely with the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
function showSlide(integer) {
$('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn();
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn();
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
setTimeout(function() {showSlide((integer % 5) + 1);}, 5000);
}
setTimeout(function() { showSlide(2); }, 5000);
});
</script>
When a user clicks on any of the tabs, the slider jumps to that tab, but the timer keeps counting and automatically in less than 5 seconds it continues automatically flowing where it was.
How could I make that the timer stops when a user clicks on any of the tabs?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
存储对超时的引用并在用户单击时清除它。
Store a reference to the timeout and clear it when the user clicks.
当您使用 setTimeout 时,将其设置为一个变量,以便稍后可以使用clearTimeout。例如,
祝你好运:)
When you use setTimeout, set it so a variable so you can later use clearTimeout. For example,
Good luck :)