![](/img/trans.png)
[英]setInterval function in javascript stops executing after a few seconds
[英]How to stop a setInterval function on click, and restart after a few seconds
我的自定義滑塊中存在一個問題:我想在單擊“下一步” /“后退”按鈕時停止setInterval
事件,然后在3秒鍾后重新啟動。
滑塊: http : //karanbhilware.com/mail_send/slider.html
間隔代碼如下。
HTML:
<div class="slider">
<div id="sliderUL"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> </div>
</div>
<div style="clear:both"> </div>
<div id="sliderNav">
<button id="back" data-file="previous" style="float:left; margin-left:50px;">previous</button>
<button id="next" data-file="next" style="float:right; margin-right:50px;">Next</button>
</div>
JavaScript:
var sliderWrap = $('#sliderUL'),
img = $('#sliderUL img')
singleWidth = sliderWrap.find('img:first-child').width(),
imageLenght = img.length,
idCount = 1,
current = 1,
firstImage = img.first();
lastImage = img.last(),
secondLast = imageLenght-1;
secondImage = img.eq(1);
firstImage.addClass('active');
img.each(function(){
$(this).attr('id','slider_'+idCount++);
});
if(current === 1){
$('#back').addClass('none');
}
$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
if(current === imageLenght){
$('#next').removeClass('none');
}
if(current === 2){
$(this).addClass('none');
}
var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
current--;
}
function nextFun(){
var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
current++;
if(current === 2){
$('#back').removeClass('none');
}
if(current === imageLenght){
$('#next').addClass('none');
}
}
var mode = 'Next';
function autRotatae(){
if(current == imageLenght)
mode = 'Back';
if(current == 1)
mode = 'Next';
if(mode == 'Next')
{
nextFun();
}
else
backFun();
}
$(document).ready(function(){
setInterval(autRotatae,2000);
})
您不能“暫停”間隔。 您可以取消並重新啟動它。
將時間間隔的創建和暫停移至單獨的功能,因此您無需重復自己的操作:
var rotateInt = null;
$(document).ready(function(){
startRotate();
})
function startRotate() {
if (! rotateInt)
rotateInt = setInterval(autRotatae, 2000);
}
function pauseRotate() {
if (rotateInt)
{
clearInterval( rotateInt );
rotateInt = null;
setTimeout( startRotate, 3000 );
}
}
然后,在您的下一個/上一個按鈕處理程序中:
pauseRotate();
var timer;
var sliderWrap = $('#sliderUL'),
img = $('#sliderUL img')
singleWidth = sliderWrap.find('img:first-child').width(),
imageLenght = img.length,
idCount = 1,
current = 1,
firstImage = img.first();
lastImage = img.last(),
secondLast = imageLenght-1;
secondImage = img.eq(1);
firstImage.addClass('active');
img.each(function(){
$(this).attr('id','slider_'+idCount++);
});
if(current === 1){
$('#back').addClass('none');
}
$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000);},3000);
if(current === imageLenght){
$('#next').removeClass('none');
}
if(current === 2){
$(this).addClass('none');
}
var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
current--;
}
function nextFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000); },3000);
var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
current++;
if(current === 2){
$('#back').removeClass('none');
}
if(current === imageLenght){
$('#next').addClass('none');
}
}
var mode = 'Next';
function autRotatae(){
if(current == imageLenght)
mode = 'Back';
if(current == 1)
mode = 'Next';
if(mode == 'Next')
{
nextFun();
}
else
backFun();
}
$(document).ready(function(){
timer = setInterval(autRotatae,2000);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.