JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<img class = "ejemplo" src = "http://www.decoracion-de-interiores.net/wp-content/uploads/2011/07/africano.jpg" />
<img class = "ejemplo" src = "http://3.bp.blogspot.com/_mDCUlcb7a3s/S-G-trqRDmI/AAAAAAAAABY/wktQjhTLCJM/s1600/carolina.jpg" />
<img class = "ejemplo" src = "http://img.absoluthoteles.com/wp-content/uploads/2009/06/occ2.jpg" />

CSS

.ejemplo{
    position: absolute;
    opacity: 0;
    transition: .75s;
}

JavaScript

var imagenes = document.getElementsByClassName("ejemplo"),
    total = imagenes.length,
    posicion = 0,
    cambiar = function (){
        imagenes[posicion].style.opacity = 0;        
        posicion = posicion == total - 1 ? 0 : ++posicion;
        imagenes[posicion].style.opacity = 1;
    };

imagenes[posicion].style.opacity = 1;
setInterval(cambiar, 3000);