Problema con codigo Javascript

[Alexis88]

Se me ocurre que tengas tres elementos <img>, siendo el tercero contenido por un enlace. A los tres elementos (las dos primeras imágenes y el enlace que contiene a la tercera imagen) les asignas una clase en común, luego, en la hoja de estilos, los ocultas y en el código JavaScript, los tomas por la clase que les asignaste. Luego, al cargar la página, muestras al primero de los tres elementos con la clase designada y al darle un clic, lo ocultas y pasas a mostrar el segundo elemento. Enseguida, usando el método setTimeout, ejecutas una función luego de tres segundos, en la cual ocultarás a la segunda imagen para mostrar al enlace con la imagen contenida.

Código HTML:

<img src = "imagen1.jpg" class = "cambia" />
<img src = "imagen2.jpg" class = "cambia" />
<a href = "enlace.html" class = "cambia">
    <img src = "imagen3.jpg" />
</a>
 

Código CSS:

.cambia{
    position: absolute;
    display: none;
}
 

Código Javascript:

var cambia = document.querySelectorAll(".cambia"); //Elementos con la clase "cambia"
 
cambia[0].style.display = "block"; //Por defecto, muestro al primero
 
cambia[0].addEventListener("click", function(){
    this.style.display = "none";
    cambia[1].style.display = "block";
    setTimeout(function(){
        cambia[1].style.display = "none";
        cambia[2].style.display = "block";
    }, 3000);
}, false);
 

DEMO

Podrías simplificar más el código, pero como dices que eres nuevo con JavaScript, será mejor que primero entiendas bien esta sencilla forma de hacerlo para que más adelante lo simplifiques. No olvides colocar el código JavaScript justo antes de la etiqueta </body> para que surta efecto.

Saludos