Banner rotatorio con JavaScript
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 cambiaran cada “x” segundos y al pulsar cada banner nos llevara a una pagina 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 ira a la pagina correspondiente de esa sección. El ejemplo lo podéis descargar de DESCARGAR EJEMPLO AQUÍ.
Lo primero que tenemos que hacer es crearnos dos ficheros, uno que será el “html” (el de la propia pagina web) y otro fichero “javacript”. Se podría realizar todo dentro del mismo fichero “html” pero como consejo es mas 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 javacript 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 y las URLs asociadas a cada imagen. A continuación mostramos como quedarían los arrays.
/* 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).
//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 numero 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)”.
function banner() {
contador++;
contador = contador % longuitudArray
document.banner.src = ads[contador];
setTimeout("banner()", timer);
}
La otra función (function ponerURL()) asignara al href que le digamos en el “html” la URL que se encuentra en cada posición del array de URLs. En este caso asignara 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.
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").
<script type="text/javascript" src="funcionesJS.js"></script>
Lo siguiente que tenemos que hacer es decirle a la pagina que ejecute la función “banner()” al cargarse. Esto lo hacemos llamando a la función en la etiqueta “body” de la siguiente manera:
<body onload="banner()">
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):
<a href="javascript:ponerURL()" target="_blank">
Y por último decir en que elemento imagen, se cambiaran las imágenes que formaran el banner, que lo haremos de la siguiente manera:
<img src="" name="banner" >
En resumen este es el contenido de los dos ficheros creados para conseguir un banner rotatorio:
“funcionesJS.js”:
/* 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”:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"> <script type="text/javascript" src="funcionesJS.js"></script> <title>Banners rotatorio Javascript</title> </head> <body onload="banner()"> <a href="javascript:ponerURL()" target="_blank"> <img src="" name="banner" > </a> </body> </html>
Que bien, gracias.
lo de las url si funcionan pero solo en google chrome, no funcionan en Internet Explorer y Mozilla, me refiero a esto:
javascript:ponerURL(), si abre las urls pero en mozilla no muestra nada y en IE dice objeto no encontrado. ¿Alguna sugerencia please?
De todas formas muy buena página y buena intención al hacer este script.
Hola gracias por el Tuto esta genial. Mi pregunta es como cambiar de tamaño el baner resultante. Le he dado forma a las imágenes y nada. Quiero hacerlo mas rectangular ya que solo me sale cuadrado.
Hola,
estoy intentando que un banner en html y css con varios pasos y animaciones se repita 3 veces, es decir que cuando acabe el último paso vuelva a empezar el anuncio. Creo que se hace con JavaScript, pero no tengo muchos conocimientos sobre eso.
Muchas gracias
Excelente aportacion.
Felicidades
Excelente codigo me sirvio gracias por la informacion
Agradezco mucho tu aporte, es un herramienta que usare, muy sencilla y facil de enter, un toque perfecto par mi proyecto final
Y si quisiera que la imagen en lugar de cambiar cada sg cambie dependiendo del dia o mas bien la fecha.
Por lejos lo mejor que he encontrado al respecto.
Yo quiero poner todos los banners que están debajo de la cabecera de mi blog (blogger) en una sola linea, rotativos, cada x segundos.
Lo que no me queda claro es cual fichero va en la plantilla del blog (y donde) y cual a modo de entrada.
Muchas gracias.
Hola Gustavo.
En el HTML tienes que poner el «onload» en la etiqueta body.
Tienes que importar el javascript en el html y luego hacer el fichero javascript tal y como lo muestro.
Puede ser un poco lioso, pero sigue los pasos del tutorial.
SL2
Lo intento y les cuento. Muchas gracias por responder.
Al cargar mi pagina tarda en aparecer mi Banner rotatorio, ¿Por qué?
Con la información que nos das poco podemos decirte. Si tienes las imágenes en un servidor sera tu conexión a internet que no va muy fluida o puede ser que las imagenes sean muy pesadas, pero ya te digo con la información que nos das poco te podemos decir.
SL2
No me ha quedado claro que es lo que tengo que poner como elemento en src=»»
:´(
En src no tienes que poner nada ya que el src es para poner la url de la imagen a mostrar y en este caso esa url va cambiando cada ‘x’ tiempo con la url del array «ads». Si te fijas en la sentencia «document.banner.src = ads[contador];» es donde pone el src y ese cambia cada segundo en el ejemplo que hemos puesto.
SL2
Muy buena tu explicación, me ha servido de mucho pero tengo una duda, noté que en el código de javascript hay sentencias que no terminan en punto y coma y bueno yo hice algo parecido y todo está terminado con punto y coma, mi pregunta es ¿qué diferencia hay en los puntos y coma en javascript? sé que es para terminar sentencias como en c o en java pero porque no afecta eso en el código de javascript, no sé si me puedas responder esa pregunta.
De antemano muchas gracias por tu código
Buenas Luís,
en respuesta a tu pregunta, el punto y coma en JavaScript es opcional en muchos casos ya que el navegador los suele insertar de manera automática al final de cada instrucción en la que no exista ambigüedad. Por norma lo hacen todos los navegadores pero no nos tenemos que fiar. JavaScript se diseño pensando en que pudieran programar los que nos son expertos en programación (ojo, que también hay grandes expertos programadores de JavaScript, que fuera diseñado para todos los públicos no significa que no existan expertos) y que se puedan escribir sentencias «mal» y que aún así funcione (si te has pegado un poco con JavaScript habrás visto que traga muchas cosas que en otros lenguajes ni si quiera compilan)
Lo recomendable y por buena práctica de programación es ponerlo siempre, por varias razones:
1) Nos volvemos perezosos si no los ponemos y si cambiamos de lenguaje, por ejemplo programamos con Java, crea frustración ya que es obligatorio; además de tardar el doble buscando el error (y el error es que no hemos terminado la sentencia con un punto y coma; este tipo de errores aunque tontos no son fáciles de ver a simple vista).
2) Si el navegador no soporta la inserción automática de punto y coma en JavaScript va a fallar el script.
3) Si existe ambigüedad en la sentencia o el navegador pone el punto y coma donde le da la gana, o bien no lo pone, directamente devolverá error.
se puede utilizar ese codigo para colocarlo varias veces en la misma pag… ejemplo en el index
Si lo puedes hacer pero tendrías que poner en el body dos «onload» y crearte dos veces los métodos
Cómo se le podrá agregar un fade out a cada imagen como transición??? el banner funciona estupendo pero cambia demasiado brusco… se puede hacer???
Hola JartRokker.. No recuerdo muy bien como se hace eso es javascript pero en jQuery seguro que tienes alguna libreria que te lo hace como la Coin Slider por ejemplo.
SL2
El código funciona bien para Chrome, pero firefox queda la página en blanco (_blank) y no abre la url. Quizá necesite alguna optimización según el navegador. Buen artículo
Hola Richard, este es justo el banner que estoy buscando, pero no consigo saber como ponerlo en mi blog de wordpress.
No se exactamente que codigo tengo que poner en mi head, o si tengo que subir algo a mi servidor. No se si me puedes ayudar, la verdad es que yo no entiendo mucho de este tema.
Hola Iñaki.
Si ves el código fuente de nuestra pagina y si lo miras con un poco de detalle podrás ver que la publicidad que tenemos arriba esta hecho a partir de este tutorial, de hecho este tutorial lo hicimos en base a poner publicidad en nuestra web.
Bueno te cuento un par de cosas a tener en cuenta:
1º) El fichero que hemos llamado «funcionesJS.js» ese lo tienes que adaptar a tu imagenes y a tus necesidades. Solo cambia las imagenes y el tiempo que permanece cada imagen. En nuestro caso lo pusimos ‘1’ segundo. Para ello copia en alguna parte del header la parte de importar el fichero.
2º) Muy importante porque la gente falla mucho en esto. En la etiqueta body tienes que llamar a la función javascript que te cambie la imagenes esto se hace poniendo la etiqueta body.
3º) Luego dentro del «Body» y donde quieras poner las imagenes pones el «href» para cargar y cambiar la imagenes
Como consejo, prueba que te funcione lo que haces en tu ordenador trabajando en local y luego ya lo subes al servidor porque hay que ir con un poco de cuidado cuando se trabaja con javaScript.
Espero haberte ayudado. Vete poco a poco y fijandote en la cosas que es sencillo de hacer pero a la minima que te equivoques no te funcionara.
SL2
Ok Gracias por contestar tan rápido voy a ver que puedo hacer
Hola Ricardo.
No entiendo porque te da ese error. Me acabo de descargar de nuevo el proyecto y me funciona bien.
Si estas copiando este proyecto a uno nuevo, recuerda que en el html tienes que referenciar el método en la etiqueta body «
»Con lo que me dices, sino me das más datos no puedo ayudarte. Si me das mas datos me dices e intentamos solucionarlo
SL2
descargue los archivos, pero la nueva ventana lancha el siguiente mensaje en el explorador:
javascript:ponerURL() y no ingresa a las URLs…
Lamentablemente no se nada de javascript. Ayuda please.
Hola Ivan.
Esto que te comento no lo he probado pero debería ser algo así:
contador = 0;
function banner() {
if( contador != longuitudArray){
document.banner.src = ads[contador];
setTimeout(«banner()», timer);
contador++;
}
}
Mira si la sintaxis es correcta porque ya no me acuerdo de memoria de la sintaxis de javascript, pero vamos que la cuestión es que compruebas que compruebas que cuando llegue al ultimo elemento del array (es decir la imagen) no entras en el código que ejecuta el timer.
SL2
HOLA
CREEO QUE LA EXPLICACIÓN ES MUY BUENA Y MUY UTIL, SÓLO TENGO UNA DUDA, QUE CODIGO DEBERÍA AGREGAR SI QUISIERA QUE EL BANNER SE DETUVIERA EN LA ULTIMA IMAGEN
Hola Andres. No entiendo a que te refieres con lo de que código puedes usar, Aqui hay dos ficheros, uno html que llama a una función que esta en un fichero javascript. No entiendo a que te refieres. Especifica un poco más a ver si te podemos ayudar
SL2
hola,
y para colocarlo en una pagina??..que codigo puedo usar??
saludos!!