Lo que tratas de hacer es algo conocido como
slider o
carrusel de imágenes. Lo probé tal y como lo pones (sustituyendo los nombres de las imágenes) y pude ver a las tres imágenes, sin embargo, se van generando una tras otra, llegando a llenar la pantalla.
Te propongo otra manera de hacerlo:
Código HTML:
Ver original<img src = "imagen1.png" class = "slider_img" /> <img src = "imagen2.png" class = "slider_img" /> <img src = "imagen3.png" class = "slider_img" />
Código CSS:
Ver original.slider_img{
opacity: 0;
transition: .15s;
position: absolute;
}
Código Javascript
:
Ver originalvar imagenes = document.querySelectorAll(".slider_img"),
total = imagenes.length,
contador = 0,
slider = function(){
imagenes[contador].style.opacity = 0;
contador = contador == total - 1 ? 0 : ++contador;
imagenes[contador].style.opacity = 1;
};
imagenes[contador].style.opacity = 1;
setInterval(slider, 1000);
Lo que hago es lo siguiente. Primero, en el documento HTML, tengo tres imágenes, cada una con la clase 'slider_img'. En una hoja de estilos, tengo una clase 'slider_img' la cual establece opacidad nula (no se ve) al elemento al que se le aplica, además una posición absoluta (para que las imágenes se superpongan una sobre otra) y un efecto de transición de 15 centésimas de segundo. Esto último es para darle un efecto de cambio suave al cambio de opacidad que haré con el código JS.
En el archivo JS, tomo a todos los elementos que poseen la clase 'slider_img', el total que estos representan, una variable contadora para llevar un control sobre todas las imágenes y una función, sobre la cual explicaré más adelante. Antes de ejecutas la función, tomo al elemento de
imagenes equivalente al valor de
contador (que inicialmente tiene el valor 0, por lo tanto, tomaré al primer elemento de
contador) y le doy 1 como valor de opacidad (lo hago visible). Luego de esto, establezco un
temporizador cíclico que ejecutará la función
slider cada 1000 milésimas de segundo o 1 segundo.
En la función, tomo al elemento de
imagenes equivalente al valor actual de
contador y le asigno 0 como opacidad (lo hago invisible), luego, actualizo el valor de la variable contadora de acuerdo a una condición: Si el valor de
contador es igual al total de elementos de
imagenes menos uno, es decir, la última posición de dicha lista de nodos, entonces, habremos llegado al final y tenemos que reiniciar el ciclo, por lo cual le asigno el valor cero, caso contrario, aumento su valor en uno.
Finalmente, tomo a la imagen equivalente al valor actualizado de la variable contadora y la hago visible.
DEMO
P.D.: No olvides colocar este código después del último elemento del documento y justo antes de la etiqueta
</body>, de otro modo, no surtirá efecto.
Saludos
