JS cross-fade transition
I must say it was interesting running your code with some sample images-


You have so many variables declared especially the slides - You should try using a Create Factory method for your Images. Example from Creating an array of Image Objects




// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("http://www.lostarkgames.com/images/pokemonlogo.jpg", "foo title"));
images.push(createImage("http://4.bp.blogspot.com/-Jv6VFqBbTIM/VNUbs8ZehLI/AAAAAAAATD8/Dwipe_uNxTQ/s1600/Pok%C3%A9mon_Gotta_Catch_'Em_All_1.png", "bar title"));

// output
console.log(images);





When you use fade out, it's best to fade out slowly before making the image transparent e.g 1-> 0.2->0 . It's just for the user experience. the animation lacks consistency based on the timing, some images stayed longer than 20 seconds