$(document).ready(function(){
setInterval(swapImages(),1000);
function swapImages(){
var active = $('.active');
var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');
active.removeClass('active');
next.addClass('active');
}
});
I have 13 images contained in a div. The first one has a class called active, which means it is displayed.
The swap images function selects the active image and hides it, and makes the next image active.
However, when the page loads, the function only works correctly once, rather than looping.
Any ideas?
This question is related to
jquery
function
setinterval
// simple example using the concept of setInterval
$(document).ready(function(){
var g = $('.jumping');
function blink(){
g.animate({ 'left':'50px'
}).animate({
'left':'20px'
},1000)
}
setInterval(blink,1500);
});
You can use it like this:
$(document).ready(function(){
setTimeout("swapImages()",1000);
function swapImages(){
var active = $('.active');
var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');
active.removeClass('active');
next.addClass('active');
setTimeout("swapImages()",1000);
}
});
try this declare the function outside the ready event.
$(document).ready(function(){
setInterval(swapImages(),1000);
});
function swapImages(){
var active = $('.active');
var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');
active.removeClass('active');
next.addClass('active');
}
Don't pass the result of swapImages
to setInterval
by invoking it. Just pass the function, like this:
setInterval(swapImages, 1000);
Source: Stackoverflow.com