var imagenes = ["http://2.bp.blogspot.com/-8NdWPj5NIZY/TnNrI_9HWDI/AAAAAAAANLc/rvz9Yrc0eZo/s1600/mexico-escapada-paisaje-lagos-lagunas-destinos-rios-sol-horizonte.jpg", "http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg", "http://4.bp.blogspot.com/-6VJvyOXvu0o/TwtELEPywRI/AAAAAAAAA2c/lcnmWNT9dNI/s1600/paisajes480.jpg", "http://www.fotosyfondos.com/wp-content/uploads/2011/05/Paisajes-Bonitos.jpg", "http://2.bp.blogspot.com/_voQ8IM9pe9s/TSuCoNZHG9I/AAAAAAAAAwY/Gf_RDX0RCOU/s1600/PAISAJES_HERMOSOS2%255B1%255D.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";
*{ transition: all ease .75s; } label{ cursor: pointer; background: lightcyan; color: navy; font-size: 2em; border-radius: .5em; } label:nth-child(1){ float: left; } label:nth-child(2){ float: right; } label:active{ background: navy; color: lightcyan; }