Banner RotativoAprenda nesse tutorial a criar um sistema de banners rotativos para seu site utilizando a linguagem JavaScript (que é uma das maneiras mais fáceis de se fazer isso).

1. Primeiramente crie uma pasta onde serão armazenados os arquivos necessários para a criação do sistema de banners.

2. Copie para esta pasta todos os banners que você criou e o seu site.

3. Crie um arquivo JS (ou baixe-o neste link): é nele que serão armazenadas as informações sobre a localização dos banners e seus respectivos links. Para isso, abra o Bloco de Notas ou o seu editor de html favorito (nesse tutorial  utilizaremos o Dreamweaver MX).
4. Copie as linhas abaixo para o seu arquivo, você deverá alterar os campos imagem1, 2, 3, 4... e link1, 2, 3...para o nome correto.

Ex.: Em imagem1 você poderia colocar tUTO.gif, e em link1 você poderia colocar http://tutodowns1.blogspot.com.br/ .
var max = 10;
var nrImages = 6;
function makeImages() {
this[0] = "imagem1.gif";
this[1] = "imagem2.gif";
this[2] = "imagem3.gif";
this[3] = "imagem4.gif";
this[4] = "imagem5.gif";
this[5] = "imagem6.gif";
this.length = nrImages;
}
function makeLinks() {
this[0] = "http://www.link1.com.br";
this[1] = "http://www.link2.com.br";
this[2] = "http://www.link3.com.br";
this[3] = "http://www.link4.com.br";
this[4] = "http://www.link5.com.br";
this[5] = "http://www.link6.com.br";
this.length = nrImages;
}
var vetImages = new makeImages();
var vetLinks = new makeLinks();
var x = Math.round(Math.random()*max);
var y = max / nrImages;
for(var cont = 1;cont*y<= max;cont++) {
if (x <= (cont*y)) {
document.write("<a href="+vetLinks[cont-1]+" target=_blank><img src="+vetImages[cont-1]+" border=0></a>");
break;
}
}
Obs.: Caso queira aumentar ou diminuir o número de banners altere o campo var nrImages = 6, com o número de banners correto e exclua ou adicione campos this[n]...

5. Depois de preencher o arquivo com todas as informações necessárias adicione as seguintes linhas no código do seu site:

<script language="JavaScript" src="seu arquivo JavaScript.js"></script>

6. Desta maneira, o banner alternará toda vez que a página for atualizada. Confira abaixo o resultado final, atualize a página para ver um outro banner aparecer : )



,