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>
Comparte esta entrada en:
Safe Creative #1401310112503
Banner rotatorio con JavaScript por "www.jarroba.com" esta bajo una licencia Creative Commons
Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.
Creado a partir de la obra en www.jarroba.com

31 thoughts on “Banner rotatorio con JavaScript”

  1. 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.

  2. 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. 

  3. 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

  4. Agradezco mucho tu aporte, es un herramienta que usare, muy sencilla y facil de enter, un toque perfecto par mi proyecto final 

  5. 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.

    1. 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

    1. 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

    1. 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

  6. 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

    1. 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.

  7. 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???

  8. 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

  9. 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.

    1. 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

  10. 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

  11. 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.

  12. 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

  13. 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

  14. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies