It is necessary that the picture disappears first, and then a new one appears. Did so:
srcs = [ "upload/discover.png", "upload/screenshot1.png", "upload/screenshot2.png", "upload/screenshot3.png", "upload/screenshot4.png" ]; window.onload = function(){ setInterval(function() { $('.image1').fadeOut(1200, function() { $(this).attr('src',srcs[Math.floor(Math.random()*srcs.length)]).bind('onreadystatechange load', function() { if (this.complete) $(this).fadeIn(1200); }); }); }, 3000); }; However, when you change the image from large to small, it abruptly disappears, not smoothly. That's how