Faça o curso: jQuery na Prática

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!