I have created a rotating banner script for a new site I'm developing View banner here(it rotates every 10 seconds)
Unfortunately to the transition seems to be a biut buggy, and the image will fade out, show the same image again and then fade in the new one. I think I have made a simple error somewhere, but can't figure out where it is. the code used to cycle the banners is:
In document ready:
if ($('.
home').length > 0){
$('<img width="100%" />').attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg').load(function(){
$('.hero').append( $(this) );
$('.hero img').fadeIn('medium').delay(10000).fadeOut('slow', loopImages);
setHeroHeight();
});
}
Outside document ready:
function loopImages(){
homecount = homecount+1;
if (homecount > 5){
homecount = 1;
}
$('.hero img')
.attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg')
.load(function(){ $('.hero img').fadeIn('fast')}).delay(10000).fadeOut('slow', loopImages);
}
Any help would be greatly appreciated
Thanks
Dave
