cambiar imagen de fondo con jquery

[cristo995]

tengo varias imagenes para ponerlas como fondo en mi web, luego en la parte inferior pienso tener dos flechas: " < > " y me gustaria que al picar en ellas se me cambiara el fondo del body con algun efecto como fadeIn , show , o de forma horizontal como si fuese un slider etc..

pero no sabria como hacer esto con jquery.

de antemano agradeceria vuestra ayuda.

[Alexis88]

¿Y si te dijera que con código JS nativo también se puede?

Código Javascript:

var imagenes = ["imagen1.jpg", "imagen2.jpg", "imagen3.jpg"],
    total = imagenes.length,
    contador = 0,
    atras = document.getElementById("atras"),
    adelante = document.getElementById("adelante");
 
atras.addEventListener("click", function(){
    contador = contador === 0 ? total - 1 : --contador;
    document.body.style.opacity = 0;
    document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
    document.body.style.backgroundSize = "cover";
    document.body.style.opacity = 1;
}, false);
 
adelante.addEventListener("click", function(){
    contador = contador == total - 1 ? 0 : ++contador;
    document.body.style.opacity = 0;
    document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
    document.body.style.backgroundSize = "cover";
    document.body.style.opacity = 1;
}, false);
 
document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
document.body.style.backgroundSize = "cover";
 

Lo que hago es simple. Primero, creo un array con los nombres de las imágenes, obtengo el total de ellas y declaro una variable que usaré como contador para ir avanzando/retrocediendo en la lista de imágenes. También tomo a los botones que usaré para avanzar y retroceder.

Cuando le de un clic al botón de retroceso, actualizo el valor del contador mediante una condición; si su valor es igual a cero, es decir, si se está visualizando la primera imagen, le asigno la última posición del array para así mostrar a la última imagen, caso contrario, le resto uno. Luego, desaparezco el cuerpo del documento, le añado la imagen equivalente al valor actualizado del contador, la ajusto al cuerpo del documento y la hago visible nuevamente. El proceso para el botón de avance es lo opuesto a lo que te acabo de explicar.

Finalmente, cuando cargue la ventana, mostraré a la primera imagen y la ajustaré al cuerpo del documento. El efecto de desvanecimiento lo genero con la propiedad transition de CSS desde la hoja de estilos.

Saludos

[cristo995]

hola. gracias por tu ayuda.

pero tengo dos dudas.
las transisiones en chrome funcionan todas bien , pero en mozilla y en explorer solo la primera imagen toma el tiempo y las siguientes ya se cambian todo rapido como evadiendo los segundos que le e dado.

ni dandole los prefijos a cada navegador sigue evadiendo el tiempo:
-moz-transition: all ease;
-webkit-transition: all ease;
-o-transition: all ease;
-ms-transition: all ease;
transition: all ease;

-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;

La segunda duda es como le podria hacer para que el efecto fuera horizontal similiar a un slider

[Alexis88]

Me parece raro lo del problema con la transición, pero ya que quieres que el fondo se mueva en lugar de desvanecerse, podrías probar modificando este ejemplo que en lugar de realizar el movimiento de izquierda a derecha, lo hace de arriba hacia abajo.

Saludos