I don't wanna get into the code, but let imgDivs
be an array of all of the divs (for example, get it calling getElementsByClassName), and let each of those divs contain an array link
with the links to the images.
changeImage=function(){
this.imgId==(this.imgId==this.links.length-1?0:this.imgId+1);
this.style.backgroundImage="url("+this.links[imgId]+")";
}
imgDivs.forEach(function(imgDiv){
imgDiv.imgId=0;
imgDiv.changeImage=changeImage.bind(imgDiv);
imgDiv.onmouseover=function(){
this.intId=setInterval(changeImage,1000);
}
imgDiv.onmouseleave=function(){
clearInterval(this.intId);
}
});
@Teh Walris solution iterates through the divs every second, while my does not.
But does it work?