JS cross-fade transition As the question says....Can this be done any better? I could introduce more variables to cut down on function number, but does it make sense? So this is a simple cross-fade between two images :

var slide_number = 1;
var slide_number2 = 2;
var slide1 = new Image()
slide1.src = "img/top_slideshow/slideshow-1.jpg"
var slide2 = new Image()
slide2.src = "img/top_slideshow/slideshow-2.jpg"
var slide3 = new Image()
slide3.src = "img/top_slideshow/slideshow-3.jpg"
var slide4 = new Image()
slide4.src = "img/top_slideshow/slideshow-4.jpg"
var slide5 = new Image()
slide5.src = "img/top_slideshow/slideshow-5.jpg"
var slide6 = new Image()
slide6.src = "img/top_slideshow/slideshow-6.jpg"
var slide7 = new Image()
slide7.src = "img/top_slideshow/slideshow-7.jpg"
var slide8 = new Image()
slide8.src = "img/top_slideshow/slideshow-8.jpg"


function set_first_image() {
    document.images.slide.src = eval("slide"+slide_number+".src");
}
function set_second_image() {
    document.images.slide2.src = eval("slide"+slide_number2+".src");
}
function first_image_fade_in(){
    document.getElementsByClassName('slideshow')[0].setAttribute('style', 'opacity: 0;');
    slide_number += 2;
    if (slide_number &gt;= 9){
        slide_number = 1;
    }
    setTimeout(function() {set_first_image()}, 2000);
}
function first_image_fade_out(){
    document.getElementsByClassName('slideshow')[0].setAttribute('style', 'opacity: 1;');
}
function second_image_fade_in(){
    document.getElementsByClassName('slideshow2')[0].setAttribute('style', 'opacity: 0;');
    slide_number2 += 2;
    if (slide_number2 &gt;= 9){
        slide_number2 = 2;
    }
    setTimeout(function() {set_second_image()}, 2000);
}
function second_image_fade_out(){
    document.getElementsByClassName('slideshow2')[0].setAttribute('style', 'opacity: 1;');
}

function slideshow(){
    setTimeout(function() {first_image_fade_in()}, 20000);
    setTimeout(function() {second_image_fade_out()}, 20000);
    setTimeout(function() {first_image_fade_out()}, 40000);
    setTimeout(function() {second_image_fade_in()}, 40000);
    setTimeout(function() {slideshow()}, 40000);
}
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