Mostrar DIV aleatoria

[Jot3to]

Estimados, tengo una especie de slider en mi sitio web. Es un DIV con una imagen de fondo y un par de textos. Me gustaría tener 3 opciones de DIV con sus respectivos elementos y que al cargar el sitio se mostrara uno de manera aleatoria ¿Me ayudan? :(

[Alexis88]

Toma al conjunto de elementos <div>, ya sea por su nombre de etiqueta (div) o un identificador en común, como puede ser una clase:

Código HTML:

<div class="foo">Contenido 1</div>
<div class="foo">Contenido 2</div>
<div class="foo">Contenido 3</div>
 

Código CSS:

.foo{
    display: none;
}
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var foo = document.querySelectorAll(".foo");
}, false);
 

Utilizando los métodos Math.floor() y Math.random(), genera un número aleatorio de entre el total de elementos:

Código Javascript:

var i = Math.floor(Math.random() * foo.length);
 

Y, desde el conjunto de elementos, toma al que su ubicación corresponda con el valor aleatorio generado y muéstralo:

Código Javascript:

foo[i].style.display = "block";
 

Todo junto:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var foo = document.querySelectorAll(".foo"),
        i = Math.floor(Math.random() * foo.length);
 
    foo[i].style.display = "block";
}, false);