Loop background images using jQuery
- by da5id
I'm trying to get the back-ground image of a legacy div (by which I mean it already has a background image, which I cannot control & thus have to initially over-write) to smoothly rotate indefinitely. Here's what I have so far:
var images = [
"/images/home/19041085158.jpg",
"/images/home/19041085513.jpg",
"/images/home/19041085612.jpg"
];
var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
counter ++;
if (counter == colours.length) {
counter = 0;
}
}, 2000);
Trouble is, it's not smooth (I'm aiming for something like the innerfade plugin), and it's not indefinite (it only runs once through the array). All help greatfully appreciated :)