jQuery Número aleatorio no funciona

Question

Estoy intentando que jQuery genere un fondo aleatorio en el cuerpo de mi sitio basado en un número. Así que estoy intentando que genere main1.jpg o main2.jpg y lo arroje al cuerpo como fondo.

Por alguna razón, solo está generando main2.jpg. Aquí está mi código:

$(document).ready(function(){ 

    $("body").css({'background' : 'url(images/main1.jpg)'}).hide(); 
    $("body").css({'background' : 'url(images/main2.jpg)'}).hide(); 

    var randomNum = Math.floor(Math.random()*2); /* Pick random number */ 

    $("body").css({'background' : 'url(images/main:eq(' + randomNum + ').jpg)'}).show(); /* Select div with random number */ 

}); 

Gracias, Wade

Answer 1

es muy confuso para ver lo que está tratando de hacer. En este momento está ocultando el cuerpo dos veces, luego agrega incorrectamente una regla CSS y luego muestra el cuerpo. Si lo que desea es establecer un fondo al azar, hacer esto:

$(document).ready(function(){ 
    var randomNum = Math.ceil(Math.random()*2); /* Pick random number between 1 and 2 */ 
    $("body").css({'background' : 'url(images/main' + randomNum + '.jpg)'}); 
}); 

Si estás interesado en añadir dos divs y mostrar una forma aleatoria, haga lo siguiente:

$(document).ready(function(){ 
    /* Pick random number between 1 and 2 */ 
    var randomNum = Math.ceil(Math.random()*2); 
    $.each([1,2], function(){ 
     var $div = $('<div class="background" style="background-image: url(images/main' + this + '.jpg)"></div>'); 
     if(this !== randomNum) $div.hide(); 
     $div.appendTo(document.body); 
    }); 
}) 

Answer 2

La razón por la que está haciendo que es la primera llamada a establecer el fondo del cuerpo sobrescribe la primera. Es el equivalente de hacer:

var s = "hello"; 
s = "world"; 
alert(s); // world 

Lo que queremos es algo más parecido a:

// this can contain as many images as you want 
var images = ["images/main1.jpg", "images/main2.jpg"]; 

// preload. This is optional 
var preload = new Array(images.length); 
for (var i=0; i<images.length; i++) { 
    preload[i] = $("<img>").("src", images[i]); 
} 

// assign one randomly 
$(function() { 
    var img = images[Math.floor(Math.random() * images.length)]; 
    $("body").css("background", "url(" + img + ")"); 
}); 

También puede ajustar esta a solamente cargar previamente la imagen que uno se utiliza para el fondo del cuerpo.

var img = images[Math.floor(Math.random() * images.length)]; 
var preload = $("<img>").attr("src", img); 
$(function() { 
    $("body").css("background", "url(" + img + ")"); 
});