JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

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

<button id = "id_boton">Mostrar al azar</button>

CSS

img{
    display: none;
}

button{
    display: block;
}

JavaScript

var boton = document.getElementById("id_boton"),
    imagenes = document.getElementsByTagName("img"),
    total = imagenes.length,
    forEach = Array.prototype.forEach;

boton.addEventListener("click", function(){
    var i = 0,
        intervalo = setInterval(function(){
            if ((i += 100) < 3000){
                var posicion = Math.floor(Math.random() * total);
                forEach.call(imagenes, function(imagen){
                    imagen.style.display = imagen == imagenes[posicion] ? "block" : "none";
                });
            }
            else
                clearInterval(intervalo);
        }, 100);
}, false);