cambiar imagen de fondo con jquery

[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