Transición imagenes fondo

[Alexis88]

Como este ya es un tema muy visto, te voy a mostrar la forma en la que creo mis sliders.

Primero, añado una cantidad X de imágenes en el documento HTML y les asigno una clase en particular:

Código HTML:

<img src = "imagen1.jpg" class = "slider" />
<img src = "imagen2.jpg" class = "slider" />
<img src = "imagen3.jpg" class = "slider" />
 

Luego, les doy una posición absoluta para que todas las imágenes ocupen la misma ubicación y las hago transparentes, además, le doy 1 segundo de transición por cada vez que se afecte la opacidad de la imagen:

Código CSS:

.slider{
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}
 

Finalmente, tomo las imágenes por el nombre de clase, creando así un array con las imágenes, obtengo el total de ellas y declaro una variable que me servirá para acceder al array e ir tomando las imágenes una a una para modificar su opacidad:

Código Javascript:

var imagenes = document.getElementsByClassName("slider"),
    total = imagenes.length;
    indice = 0;
 
imagenes[indice].style.opacity = 1;
 
var slider = {
    show: function(){
      imagenes[indice].style.opacity = 0;
      indice = indice == total - 1 ? 0 : ++indice;
      imagenes[indice].style.opacity = 1;
    }
};
 
setInterval(slider.show, 3000);
 

Inicialmente, le quitamos la transparencia a la primera imagen, luego, declaramos el objeto "slider" que contiene al método "show", en el cual hacemos transparente a la imagen que actualmente se está viendo, evaluamos el valor del índice, si es igual a la posición de la última imagen del array, le damos cero como valor para inicie la cadena, caso contrario, aumenta su valor en uno. Finalmente, mostramos la imagen equivalente al nuevo valor del índice.

El método setInterval, controla la ejecución de nuestro método, iniciándolo cada 3000 milisegundo o 3 segundos.

Así es como se ve: http://jsbin.com/OfELUcuB/1

Adecua algunos detalles para que funcione en todos los navegadores, yo lo estoy probando en Chrome y Opera y va genial.

Saludos