Aprenda 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 Baboo.gif, e em link1 você poderia colocar http://www.baboo.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 : )
Fonte:http://www.phplandia.net
