Como exibir imagens aleatórias com JavaScript

Como estou reduzindo o uso de plugins, precisei de um script para rotacionar banners. Encontrei um Javascript bem simples e que serviu perfeitamente ao meu caso. Com poucas linhas de código, serão exibidas imagens aleatórias cada vez que a página for recarregada. É bem fácil editá-lo, mesmo que você não entenda nada de programação.

Note que a exibição não é exatamente “rotativa”, não há ordem definida. Ou seja: seus leitores poderão casualmente ver o mesmo banner várias vezes seguidas. Na verdade, como verá mais abaixo, a exibição é definida pelo método get.Seconds, que pega os segundos do sistema. É meio na “loteria”, portanto indicado para apresentação de muitos banners.

Vamos supor que você tem três banners e quer exibi-los aleatoriamente. Depois de hospedá-lo em algum lugar, terá os URLs, algo como:

http://www.seuservidor.com/banner1.jpg
http://www.seuservidor.com/banner2.jpg
http://www.seuservidor.com/banner3.jpg

Esse é o código.

<!--
This Script Free To Use Providing This Notice Remains
This Script Has Been In The http://www.DesignerWiz.com Javascript Public Archive Library 
NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply -->
<script type="text/javascript" language="JavaScript">
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="Esse é o banner 1";
url="http://www.seuservidor.com/banner1.jpg";
alt="Banner 1";
banner="http://www.seuservidor.com/banner1.jpg";
width="250";
height="250";
}
if (ad==2) {
txt="Olá, sou o banner 2.";
url="http://www.seuservidor.com/banner2.jpg";
alt="Banner 2";
banner="http://www.seuservidor.com/banner2.jpg";
width="250";
height="250";
}
if (ad==3) {
txt="Eu sou o banner 3"; 
url="http://www.seuservidor.com/banner3.jpg";
alt="Banner 3";
banner="http://www.seuservidor.com/banner3.jpg";
width="250";
height="250";
}

document.write('<a title="' + txt + '" rel="nofollow" href="' + url + '" target="_blank">');
document.write('<img src="' + banner + '" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt="' + alt + '" border="0">');
document.write('</a>');
</script>

Como editar

Tudo que você precisa fazer é:

• Em var how_many_ads, insira o número de banners que serão exibidos. No nosso exemplo, são 3 mesmo.
• Em txt: o atributo title do link.
• Em url: link apontado pelo banner.
• Em alt: texto alternativo, aparece quando a imagem não é carregada e, em quase todos os navegadores, quando o mouse passa sobre a imagem.
• Em banner: o url do banner.
• Em width: largura do banner.
• Em height: altura do banner.

Fora isso, não mude mais nada. Coloque todo o código no lugar em que quer exibir os banners. Como dito antes, o sistema não rotaciona os banners de forma alternada, mas aleatoriamente. A sequência pode ser 1, 1, 1, 3, 2, 3 e não 1, 2, 3, 1, 2, 3, etc.

Você pode estilizar normalmente os banners, basta envolver o código por uma div, por exemplo, e aplicar nela padding, margin ou outros atributos de CSS.

Os links abrem, por padrão, em uma nova janela; se quiser que abram na mesma janela, basta remover o trecho target=”_blank”

Veja o código em funcionamento abaixo. Atualizando a página, outros banners serão exibidos (se repetir, atualize de novo).

Para exibir mais imagens, basta criar outro bloco de “if”, e aumentar o número de imagens na variável how_many_ads.

Se tiverem dúvidas, comentem.