Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Para quem pensa em fazer um slideShow de imagens mas nunca soube como trabalhar com programas de animação vetorial, os seus problemas acabaram. Chegou a revolucionaria linguagem de programação Javascript, com ela as coisas são muito mais fáceis.

Para podermos criar um slideShow de imagens no Javascript, vamos precisar de 3 funções: uma função que será o objeto, outra para trocar as imagens e uma outra para animar o slideShow.

Eu escolhi algumas imagens para podermos criar o slideShow. Copie as imagens abaixo para sua máquina para poder testar o código a seguir:

Vamos criar uma matriz que armazenará o nome das imagens e outra variável que será o objeto que realizará o slideShow:

Exemplo:

1 var mySlideList1 = ['first.jpg', 'second.jpg', 'third.jpg','forth.jpg'];
2 var mySlideShow1 = new SlideShow(mySlideList1, 'first', 1000, "mySlideShow1");

Linha 1 - A matriz mySlideList1 armazena o nome das imagens a serem usadas no slideShow.

Linha 2 - A variável mySlideShow1 é um objeto que é responsável pela animação do slideShow. Os argumentos passados para a função SlideShow são, respectivamente:

- mySlideList1 - matriz com o nome das imagens;
- first - nome da imagem que será usada para a animação;
- 1000 - tempo que leva para a troca de imagens na animação;
- mySlideShow1 - nome do objeto responsável pela animação

Vamos criar a função que será o nosso objeto. A partir do mesmo podemos criar quantas instâncias desejarmos. A função SlideShow receberá quatros argumentos que são, respectivamente: slideList, image, speed e name.

Para animar o slide, o método play será criado baseado na função SlideShow_play. Esse método será criado com o uso da instrução prototype que foi visto em colunas anteriores.

Exemplo:

1 function SlideShow(slideList, image, speed, name){
2         this.slideList = slideList;
3         this.image = image;
4         this.speed = speed;
5         this.name = name;
6         this.current = 0;
7         this.timer = 0;
8 }
9 SlideShow.prototype.play = SlideShow_play;

Linha 1 - Declaração da função SlideShow() que será o nosso objeto responsável por animar o slideShow.

Linha 2 a 7 - São criadas algumas propriedades para o objeto SlideShow. Alguns valores são recebidos através dos argumentos da função e as duas últimas propriedades recebem valor = 0.

Linha 9 - Uso da instrução prototype para a criação do método play que se baseia na função SlideShow_play.

Vamos criar a função switchImage que será responsável pela troca das imagens na animação. Como a funão SlideShow_play chama a função switchImage, é interessante criá-la primeiro para evitar erros.

Exemplo:

1 function switchImage(imgName, imgSrc){
2         if (document.images){
3                 if (imgSrc != "none"){
4                         document.images[imgName].src = imgSrc;
5                 }
6         }
7 }

Linha 1 - Declaração da função switchImage() que sera responsável por trocar as imagens na animação, a mesma recebe duas informações nos seus argumentos, imgName (nome da imagem que sera animada) e imgSrc (imagem a ser animada).

Linha 2 - Verificação se o browser suporta a instrucao document.images. Essa instrução funciona nos browsers Netscape Navigator a partir da versão 2 e Internet Explorer a partir da versão 3.

Linha 3 - Verificação se o argumento imgSrc tem valor diferente de “none”, se retornar true a imagem será trocada por outra e assim criar a animação do slideShow.

Linha 4 - Realização da troca de uma imagem por outra na animação.

Finalmente vamos criar a função SlideShow_play que é responsável pelo método play do objeto SlideShow, essa função chama a função switchImage() para realizar a troca das imagens por um período de tempo determinado no objeto SlideShow, também um incremento é adicionado para realizar um loop na troca das imagens.

Exemplo:

1 function SlideShow_play(){
2         with(this){
3                 if(current++ == slideList.length-1) current = 0;
4                 switchImage(image, slideList[current]);
5                 clearTimeout(timer);
6                 timer = setTimeout(name+'.play()', speed);
7         }
8 }

Linha 1 - Declaração da função SlideShow_play() que é a base do método play do objeto SlideShow.

Linha 2 - Utilização da declaração with(this) para economizar digitação.

Linha 3 - Verificação se a propriedade current contem o mesmo valor do tamanho da matriz, se retorna true a propriedade é setada com valor = 0 para realizar o loop da animação.

Linha 4 - Uma chamada da função switchImage() para a realização da troca das imagens

Linha 5 - A variável timer tem seu valor apagado.

Linha 6 - O método play é utilizado baseado no tempo proposto.

Para finalizar o nosso exemplo, precisamos inserir uma imagem no nosso documento HTML e dar a imagem o nome 'first' que foi utilizado no nosso código acima. Vamos também criar um link para iniciar a animação do nosso slideShow.

Exemplo:

1 <img src="first.jpg" width="112" height="170" border="0" name="first">
2 <br>
3 <a href="javascript:void(null)" onClick="mySlideShow1.play()">play SlideShow</a>

Linha 1 - Inserção da imagem que recebera o nome first.

Linha 3 - Link para dar o play na animação. O evento onClick chama o método play do objeto mySlideShow1.

Clique aqui para ir ao .html com o código do SlideShow.

Vai aí um desafio para os amantes da programação Javascript:

- Criar um método chamado stop responsável por parar a animação.
Requisitos:
- Criar uma função chamada SlideShow_stop que será a base do método stop;
- Utilizar a instrução prototype para a criação do método stop;
- Nao deixar que o tempo do método play continue correndo mesmo com a animação parada, isso causará uso de processamento desnecessário.
- Criar um link para dar um stop na animação.

Valeu galera até a próxima semana!