--- title: Banner rotatorio con JavaScript url: https://jarroba.com/banner-rotatorio-con-javascript/ author: Richard [Admin Jarroba] date: 2012-07-10 modified: 2026-10-21 language: es license: CC BY-NC-SA 3.0 (https://creativecommons.org/licenses/by-nc-sa/3.0/) — attribution: "Banner rotatorio con JavaScript", Richard [Admin Jarroba], jarroba.com categories: Tecnologias Web --- # Banner rotatorio con JavaScript > Crea un banner rotatorio con JavaScript: dos arrays de imágenes y URLs, setTimeout para cambiar la imagen cada segundo y enlaces distintos en cada banner. En este tutorial vamos a realizar con Javascript un banner “rotatorio”. Lo que queremos decir con “banner rotatorio”, es que tendremos varios banner colocados en una misma posición que cambiarán cada “x” segundos y al pulsar cada banner nos llevará a una página web distinta. En este ejemplo cada imagen del banner será la imagen de cada una de las secciones de la web de www.jarroba.com y al pulsar en cada una de ellas se irá a la página correspondiente de esa sección. El ejemplo lo podéis descargar de [DESCARGAR EJEMPLO AQUÍ](https://jarroba.com/wp-content/uploads/2012/07/BannerRotatorioJarroba.com_.zip). Lo primero que tenemos que hacer es crearnos dos ficheros, uno que será el “html” (el de la propia página web) y otro fichero “javascript”. Se podría realizar todo dentro del mismo fichero “html” pero como consejo es más conveniente y ordenado tener dos ficheros separados, sobre todo cuando se trabaja con páginas web complejas y con muchas funciones ya sean javascript, php, AJAX, etc. Lo primero que tenemos que hacer en el fichero javascript que lo hemos llamado “*funcionesJS.js*”, es crearnos dos arrays del mismo tamaño. En uno de ellos almacenaremos las imágenes y en el otro las URLs asociadas a cada imagen. A continuación mostramos como quedarían los arrays. ```javascript /* ARRAY DE IMAGENES */ ads = new Array(9); ads[0] = "https://jarroba.com/wp-content/uploads/2012/03/Modelado.png"; ads[1] = "https://jarroba.com/wp-content/uploads/2012/03/LenguajesProgramacion.png"; ads[2] = "https://jarroba.com/wp-content/uploads/2012/03/AplicacionesMoviles.png"; ads[3] = "https://jarroba.com/wp-content/uploads/2012/03/TecnologiaWeb.png"; ads[4] = "https://jarroba.com/wp-content/uploads/2012/03/Servidores.png"; ads[5] = "https://jarroba.com/wp-content/uploads/2012/03/SistemasOperativos.png"; ads[6] = "https://jarroba.com/wp-content/uploads/2012/03/BaseDeDatos.png"; ads[7] = "https://jarroba.com/wp-content/uploads/2012/03/Hadware.png"; ads[8] = "https://jarroba.com/wp-content/uploads/2012/03/InteligenciaArtificial.png"; /* ARRAY DE URLs */ arrayURLs = new Array(9); arrayURLs[0] = "https://jarroba.com/indice-ingenieria-del-software/" arrayURLs[1] = "https://jarroba.com/lenguajes-de-programacion/" arrayURLs[2] = "https://jarroba.com/aplicaciones-moviles/" arrayURLs[3] = "https://jarroba.com/tecnologias-web/" arrayURLs[4] = "https://jarroba.com/redes/" arrayURLs[5] = "https://jarroba.com/sistemas-operativos/" arrayURLs[6] = "https://jarroba.com/bases-de-datos/" arrayURLs[7] = "https://jarroba.com/diseno-hardware/" arrayURLs[8] = "https://jarroba.com/inteligencia-artificial/" ``` Lo siguiente que debemos hacer (y esto ya depende de cada uno) es declarar una variable “*contador*” para ir recorriendo las posiciones de los arrays y otra variable para asignar el tiempo que permanecerán los banners visibles (el tiempo se pone en milisegundos, por eso se multiplica por 1000). ```javascript //variable para llevar la cuenta de las imagenes var longuitudArray = ads.length; var contador = 0 // Cojemos un numero aleatorio contador = Math.floor((Math.random() * longuitudArray)) // Cambia la imagen cada segundo en este ejemplo var tiempo = 1// En segundos var timer = tiempo * 1000; ``` En este caso lo que hemos hecho es coger un número aleatorio entre el 0 y 9 “*contador = Math.floor((Math.random() * longuitudArray))*” (que es la longitud de nuestro array) para que al cargarse la página empiece por un banner cualquiera de los que tenemos. Si queremos que empiece siempre por el principio podemos quitar esta sentencia y la variable “*longuitudArray*”. Ahora lo siguiente que tenemos que hacer es crearnos dos funciones que nos cambien la imagen del banner cada “x” segundos. La primera función (*function banner()*) va a cambiar la imagen del src con nombre banner (*document.***banner***.src = ads[contador];*) cada segundo. Lo que hace esta función es recorrer el array de imágenes con el índice contador y asignando esa posición del array al src de la imagen. Esta función será llamada cada “x” segundos que en nuestro caso será cada segundo asignado por la variable ‘timer’ en la llamada a la función “*setTimeout("banner()", ***timer***)*”. ```javascript function banner() { contador++; contador = contador % longuitudArray document.banner.src = ads[contador]; setTimeout("banner()", timer); } ``` La otra función (*function ponerURL()*) asignará al href que le digamos en el “html” la URL que se encuentra en cada posición del array de URLs. En este caso asignará la URL correspondiente al array de URLs marcada con el índice ‘contador2’ que tendrá el mismo valor que el índice ‘*contador*’ que recorrerá el array de imágenes. ```javascript function ponerURL() { contador2 = contador; url = window.open(arrayURLs[contador2]); return false; } ``` Una vez que tenemos nuestras funciones en javascript, vamos a pasar a llamar a estas funciones en nuestro fichero “html”. Lo primero que tenemos que hacer es importarnos nuestro fichero javacript llamado “*funcionesJS.js*” (Esto lo ponemos en el "*head*"). ```xml ``` Lo siguiente que tenemos que hacer es decirle a la página que ejecute la función “*banner()*” al cargarse. Esto lo hacemos llamando a la función en la etiqueta “body” de la siguiente manera: ```xml ``` Lo siguiente que tenemos que hacer es asignar al ‘href’ correspondiente la URL del array de URLs, que lo hacemos de la siguiente manera (*target="_black"* es para que la página se abra en otra pestaña): ```xml ``` Y por último decir en que elemento imagen, se cambiaran las imágenes que formaran el banner, que lo haremos de la siguiente manera: ```xml ``` En resumen este es el contenido de los dos ficheros creados para conseguir un banner rotatorio: **“funcionesJS.js”:** ```javascript /* ARRAY DE IMAGENES */ ads = new Array(9); ads[0] = "https://jarroba.com/wp-content/uploads/2012/03/Modelado.png"; ads[1] = "https://jarroba.com/wp-content/uploads/2012/03/LenguajesProgramacion.png"; ads[2] = "https://jarroba.com/wp-content/uploads/2012/03/AplicacionesMoviles.png"; ads[3] = "https://jarroba.com/wp-content/uploads/2012/03/TecnologiaWeb.png"; ads[4] = "https://jarroba.com/wp-content/uploads/2012/03/Servidores.png"; ads[5] = "https://jarroba.com/wp-content/uploads/2012/03/SistemasOperativos.png"; ads[6] = "https://jarroba.com/wp-content/uploads/2012/03/BaseDeDatos.png"; ads[7] = "https://jarroba.com/wp-content/uploads/2012/03/Hadware.png"; ads[8] = "https://jarroba.com/wp-content/uploads/2012/03/InteligenciaArtificial.png"; /* ARRAY DE URLs */ arrayURLs = new Array(9); arrayURLs[0] = "https://jarroba.com/indice-ingenieria-del-software/" arrayURLs[1] = "https://jarroba.com/lenguajes-de-programacion/" arrayURLs[2] = "https://jarroba.com/aplicaciones-moviles/" arrayURLs[3] = "https://jarroba.com/tecnologias-web/" arrayURLs[4] = "https://jarroba.com/redes/" arrayURLs[5] = "https://jarroba.com/sistemas-operativos/" arrayURLs[6] = "https://jarroba.com/bases-de-datos/" arrayURLs[7] = "https://jarroba.com/diseno-hardware/" arrayURLs[8] = "https://jarroba.com/inteligencia-artificial/" //variable para llevar la cuenta de las imagenes var longuitudArray = ads.length; var contador = 0 // Cojemos un numero aleatorio contador = Math.floor((Math.random() * longuitudArray)) // Cambia la imagen cada segundo en este ejemplo var tiempo = 1// En segundos var timer = tiempo * 1000; function banner() { contador++; contador = contador % longuitudArray document.banner.src = ads[contador]; setTimeout("banner()", timer); } function ponerURL() { contador2 = contador; url = window.open(arrayURLs[contador2]); return false; } ``` **“bannerRotatorio.html”:** ```xml Banners rotatorio Javascript ```