Rotar botones o banners de forma aleatoria

Esta es una manera de ir mostrando en el mismo espacio, una serie de imágenes con enlace, que se van viendo siguiendo una serie predeterminada, pero empezando cada vez que se accede a la página por una distinta. Los siguientes botones son un ejemplo y si refrescais podeis ver que la secuencia empieza cada vez por uno distinto.

Esto puede servir para mostrar una lista de enlaces de cualquier tipo, sin ocupar tanto espacio como en una lista normal y sin darle prioridad a ninguno de ellos: un blogroll, diversos banners publicitarios, unos botones o simplemente una galería de imágenes.

Es sistema está basado totalmente en el siguiente script:

<script type="text/javascript">
var ban = new Array();
var enl = new Array();
var indice = 0;

ban[0] = new Image();
ban[0].src = "URL_IMAGEN_0";
enl[0] = "URL_ENLACE_0";

ban[1] = new Image();
ban[1].src = "URL_IMAGEN_1";
enl[1] = "URL_ENLACE_1";

ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);

function rota()
{if (indice == ban.length) indice = 0;
if (document.images) {
document.images.rotando.src = ban[indice].src;
}
else {
document.getElementById('rotando').src=ban[indice].src;
}
indice++;
setTimeout('rota()',2000);
}
function vete() {window.open(enl[indice-1]);}
</script>

<img id="rotando" style="cursor:pointer;" src="" onclick="vete();"/>
<script type="text/javascript">rota();</script>

El valor 2000 es el tiempo en milisegundos (2 segundos) que se espera antes de mostrar el siguiente botón. Podeis modificar ese valor por el que más os convenga.

Las imágenes y enlaces que se quieren colocar, tienen que ir en la matriz BAN y en la llamada ENL. Cada grupo de tres líneas representan una imagen y su enlace respectivo. En un principio, este código está preparado para 3 imágenes/enlaces. Si se quieren añadir más, simplemente hay que insertar más líneas con la misma estructura:

...
ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

ban[3] = new Image();
ban[3].src = "URL_IMAGEN_3";
enl[3] = "URL_IMAGEN_3";

ban[4] = new Image();
ban[4].src = "URL_IMAGEN_4";
enl[4] = "URL_IMAGEN_4";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);
...

Si por casualidad lo de que las imágenes se muestren de forma aleatoria no os conviene, entonces simplemente eliminar del script las dos últimas líneas que se ven en el último trozo de código que os hemos puesto; las que asignan valores a la variable INDICE.

Lo que aquí se reproduce está preparado para copiar en un gadget tipo HTML/JavaScript.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter