Banner rotatorio con javascript
HTML
<div id="contenedor" class="contenedor"></div>
CSS
.contenedor {
width: 100%;
height: 200px;
margin: 0px;
background: white url(http://redstar.linaresdigital.com/imagenesblog/programacion-web/patron-repetido.png) 0px 0px;
}
JavaScript
/* 10 segundos por cada transición */
var tiempo = 10000;
/* Ancho de la imagen de fondo en pixeles */
var ancho = 346; // ancho de la imagen
/* Objeto que "fondopos" tratará, para evitar usar IIFE */
var contenedor;
/* Función que genera la secuencia de animación de cada ciclo */
function generar() {
/* Incremento de tiempo en cada movimiento de pixel. */
var intervalo = tiempo / ancho;
/* No es pesado buscar el elemento por cada 10 segundos */
contenedor = document.getElementById("contenedor");
console.log("B");
var t;
/* Animamos de pixel en pixel para asegurar algo de suavidad en la animación */
for (xpos = ancho, t = 0; xpos > 0; xpos--, t += intervalo) {
setTimeout("fondopos(" + xpos + ", 0)", t);
}
/* Al final de la secuencia nos volvemos a llamar para inciar la siguiente */
setTimeout("generar()", tiempo);
}
/* Función que modifica el estilo CSS para animar la posición del fondo */
function fondopos(x, y) {
contenedor.style.backgroundPosition = String(x) + "px " + String(y) + "px";
}
/* En cuanto cargue el documento iniciamos la animación */
window.onload = generar;