Topos Rotativos sem banco de dados

Topos Rotativos


VIDEO AULA:



TUTORIAL:

Teoria: Aqui poderemos ter uma pagina com topos rotativos, dinamicos. Eis um exemplo, www.rocobr.com.br (atualize a pagina, e verá o efeito). Para isso, voce precisará ter os seus topos ja prontos.
Como podem ver, aqui estão os meus (e minha index):



Repare, que o nome dos topos sao quase iguais, diferenciando apenas no numerador (1,2,3...). Para este sistema, voce podera usar quantos topos quiser, e isto nao se aplica somente a topos, podem ser banners, fotos, etc (o que sua imaginação permitir).

Prática:

Aqui esta minha pagina ja montada, com um topo estático. Agora iremos ver como dinamizar tudo.

(Clique nas imagens para aumentar)



Repare bem no código html abaixo; este é o meu topo. Na próxima imagem você verá a diferença.



Agora veja.



O que aconteceu? Alteramos o src do topo "topo1.jpg" para o que você está vendo.
Esta é a função rand() do php. Cada vez que ela é carregada ela sorteia um numero, dentre os valores descritos nela.

Tradução, cada vez que a pagina for carregada, ela sorteará um numero de 1 a 3. Certo, e quantos topos nos temos? 3! Assim, cada vez que pagina for carregada ela ira "escolher" um dos tres topos para ser mostrados.

Desta forma você nao precisa de um banco de dados, o que simplifica e muito o script.

Explicando melhor:
Se a função sortear o numero 1, o topo escolhido sera o topo1.jpg
Se a função sortear o numero 2, o topo escolhido sera o topo2.jpg
Se a função sortear o numero 3, o topo escolhido sera o topo3.jpg

Espero que eu tenha sido claro, abraços à todos.

DOWNLOAD DOS ARQUIVOS USADOS NESTE TUTORIAL