Rotacion de Banner/Imagenes (terminado para quien lo necesite)

pleter · #1 (**permalink**) 10/05/2010, 08:27

En si, no voy a pedir ayuda porque ya lo tengo solucionado, solo queria compartirlo para quien lo necesite.
La idea es mostrar imágenes aleatorias cada vez que se entra o recarga la pagina ya que el script es leído cada vez.
Es un script muy sencillo pero que los puede sacar de un apuro si es que buscan algo así.

La base es la siguiente:

Código HTML:

<html>
<head>
<title>Rotaclientes</title>
</head>
<body>

<script language="JavaScript">
<!--

var cuantosbanners = 3 ;
var ahora = new Date()
var minutos = ahora.getMinutes()
var segundos = ahora.getSeconds()
var banner = segundos % cuantosbanners;
banner +=1;

if (banner==1) {
url=" http://www.wonded.com/ ";
alt=" Nuestros Clientes ";
imagen=" rotaclientes/1.jpg ";
width=" 269 ";
height=" 200 ";
}
if (banner==2) {
url=" http://videos.wonded.com/ ";
alt=" Nuestros Clientes ";
imagen=" rotaclientes/2.jpg ";
width=" 269 ";
height=" 200 ";
}
if (banner==3) {
url=" http://videos.wonded.com/ ";
alt=" Nuestros Clientes ";
imagen=" rotaclientes/3.jpg ";
width=" 269 ";
height=" 200 ";
}

document.write('<center>');
document.write('<a href="' + url + '" target="_blank">');
document.write('<img src="' + imagen + '" width=')
document.write( width + ' height=' + height + ' ');
document.write('alt="' + alt + '" border=0><br>');
document.write('</center>');

//-->
</script>

</body>
</html>

Ahora viene la explicación:

Cada Bloque:

Código HTML:

if (banner==1) {
url=" http://www.wonded.com/ ";
alt=" Nuestros Clientes ";
imagen=" rotaclientes/1.jpg ";
width=" 269 ";
height=" 200 ";
}

es un banner para rotar

Las imágenes las lee de carpeta "rotaclientes" donde las he enumerado 1.jpg, 2.jpg, y 3.jpg
Pueden poner la ruta y el formato que quieran especificandolo en

Código HTML:

imagen=" rotaclientes/1.jpg ";

En este caso YO utilice para que muestre solo 3, ustedes pueden adaptarlo a la cantidad que necesitan.
Solo deben modificar asta linea

Código HTML:

var cuantosbanners = 3 ;

donde el numero (en este caso 3) es la cantidad de banner a rotar
y no se olviden de agregar un bloque nuevo como este:

Código HTML:

if (banner==4) {
url=" http://www.wonded.com/";
alt=" Nuestros Clientes ";
imagen=" rotaclientes/4.jpg ";
width=" 269 ";
height=" 200 ";
}

en donde:

Código HTML:

if (banner==4) {

tiene que ser un numero consecutivo al bloque anterior para no generar problemas. Esto tiene que coincidir con el numero de

Código HTML:

var cuantosbanners = 4 ;

Otra cosa mas, en la linea que dice:

Código HTML:

var banner = segundos % cuantosbanners;

hara que nos genere un banner aleatorio respecto al resultado de "segundos de la hora actual de la pc del visitante" POR "la cantidad de banner" (que especificaste arriba)
Esto es util para que cada vez que entren o recarguen la pagina tome la probabilidad de cambiar la imagen por otra respecto a los segundos.
YO lo que uso, es cambiar esto y poner minutos y me queda de la siguienet forma:

Código HTML:

var banner = minutos % cuantosbanners;

Entonces el banner sera diferente en cada minuto y no en cada segundo, me parece un detalle bonito y que me agrada mas a mi, pero ustedes pónganlo a sus necesidades.

Se que no es el script perfecto y que hay muchos mejores, pero mis necesidades fueron cubiertas y solo quería compartilo por si alguien le es de ayuda algo rapido y sencillo para salir del paso.

Saludos y que tengan un buen dia =)

noa_shinta · #2 (**permalink**) 14/09/2010, 13:20

oye muchas gracias por tu aporte esta muy bueno ¡justo lo que necesitaba