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

  • can the image be huge? and while it is being downloaded, the interval time minus the fade takes place and therefore it twitches. - Jean-Claude
  • @ Jean-Claude not - SoSo

0