Abra su editor de texto favorito, cree un documento nuevo y escriba el siguiente
código. Adáptelo a sus necesidades. Guárdelo en la misma carpeta que la página que contendrá el rotador de banners con el nombre rotador_banners.js
// http://personal-de-jall.webcindario.com
// datos de los BANNERS
// id: un identificador para el banner;
// link: el enlace del banner;
// foto: el nombre de la imagen;
// ancho y alto.
// es importante que respete la estructura del array
var banners =[
{
"id":"BANNER 1",
"link":"javascript:void(0)",
"foto":"ban01.jpg",
"ancho":"400",
"alto":"68"
},
{
"id":"BANNER 2",
"link":"javascript:void(0)",
"foto":"banner.jpg",
"ancho":"400",
"alto":"100"
},
{
"id":"mi empresa",
"link":"javascript:void(0)",
"foto":"logo.jpg",
"ancho":"500",
"alto":"68"
}
]
// variables modificables por el usuario.
// var carpetaBanners: ruta relativa a la carpeta de las imagenes;
// var cambiaBanner: si 1 el banner cambia cada cierto tiempo; si 0 no;
// var tiempoActualizacion: si cambiaBanner==1 este es el tiempo (en milisegundos)
// de exposición de un banner;
// var nuevaVentana: si 1 abre en una nueva ventana; si 0 en la misma;
var carpetaBanners = "banners_files";
var cambiarBanner = 1;
var tiempoActualizacion = 5000;
var nuevaVentana = 1;
// variables internas del script; no modificar.
var bannerActual,bannerNuevo;
var numeroBanners = banners.length;
var texto = "";
// función que maneja el rotador de banners.
function rotaBanner()
{
// mensaje mientras cambia banner
document.getElementById("capa_banner").innerHTML = "Rotando Banner";
do
{
bannerNuevo = Math.round(Math.random()*(numeroBanners-1));
}while (bannerNuevo == bannerActual);
bannerActual = bannerNuevo;
// prepara el texto
texto += "<a href='" + banners[bannerActual]['link'] + "'";
if (nuevaVentana == 1)
{
texto += " target='_blank'";
}
texto += "><img src='" + carpetaBanners + "/" + banners[bannerActual]['foto'] + "'";
texto += "width='" + banners[bannerActual]['ancho'];
texto += "' height='" + banners[bannerActual]['alto'] + "' ";
texto += "border='0'>"
texto += "</a>";
// escribe el texto
document.getElementById("capa_banner").innerHTML = texto;
texto = "";
// si cambiaBanner==1 inicia un contador setTimeout
if(cambiarBanner == 1)
{
setTimeout("rotaBanner()",tiempoActualizacion);
}
}
