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.jpgvar slide2 = new Image()slide2.src = img/top_slideshow/slideshow-2.jpgvar slide3 = new Image()slide3.src = img/top_slideshow/slideshow-3.jpgvar slide4 = new Image()slide4.src = img/top_slideshow/slideshow-4.jpgvar slide5 = new Image()slide5.src = img/top_slideshow/slideshow-5.jpgvar slide6 = new Image()slide6.src = img/top_slideshow/slideshow-6.jpgvar slide7 = new Image()slide7.src = img/top_slideshow/slideshow-7.jpgvar slide8 = new Image()slide8.src = img/top_slideshow/slideshow-8.jpgfunction 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 >= 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 >= 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);}
JS cross-fade transition
javascript;css;image;animation
I think you're doing it a tiny bit too complicated. There are so many variables and timeouts that it's really complicated and hard to read or understand.Also I'm not sure about your list of images. Why do you create images, when you only access their src attribute? A simple array would suffice here, utilizing the browser's cache (no need to re-download anyway).Also keep in mind that you don't really have to fade both images. It's enough to only fade the topmost image.You can try my simplified approach in this jsFiddle.The basic HTML is minimalistic:<div class=imgbox>  <img id=img1 onload=fadeImage();>  <img id=img2 onload=fadeImage();></div>You only need some CSS to align the images one atop the other, plus setup the transparency/transition:/* Make sure the second image isn't visible at first */#img2 {  opacity: 0;  transition: opacity .5s;}Last but not least the actual JavaScript:var imgidx = 0;var imgtoggle = false;// Images for our slideshow - have to be at least twovar images = [  'https://i.imgur.com/woXDBE1.png',  'https://i.imgur.com/XntCAQK.png',  'https://i.imgur.com/hIHVbAj.png'];// This function will initialize loading the next image in backgroundwindow.nextImage = function() {  imgtoggle = !imgtoggle;  imgidx = (imgidx + 1) % images.length;  if (imgtoggle)    document.getElementById('img2').src = images[imgidx];  else    document.getElementById('img1').src = images[imgidx];;}// This function will trigger the crossfade and then start the timer for the next switchwindow.fadeImage = function() {  if (imgtoggle)    document.getElementById('img2').style.opacity = '1.0';  else    document.getElementById('img2').style.opacity = '0.0';  window.setTimeout(nextImage, 2000);}// Now load our very first image to start the slideshowdocument.getElementById('img1').src = images[0];Whenever an image finishes loading - which can be instantly, once the file is cached - the transition is triggered and the timer for the next swap starts.While imgidxidentifies the current image in the array, imgtoggle is used as a switch to simply alternate between both images, saving you from duplicating code.If you'd like to fade to white (or any other color) for transitions, the code above could be modified, simply adjusting the opacity of an additional <div/> covering both images.