iMasters | Por uma internet mais criativa e dinâmica

• Javascript

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 9 comentários

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!

Todos os artigos de Thiago Prado

9 comentários publicados

• 1. Link quebrado

  Quinta-feira, 28/10/2004, por Luiz Gustavo Stábile de Souza
  

  O link do exemplo está quebrado

  Responder comentário

• 2. Codigo - visualizacao de imagens

  Domingo, 31/10/2004, por Diego Diniz
  

  gostaria de saber se cvs tem algum codigo pra visualizacao de fotos, pra site de fotos, tipo fica uma coluna com as miniaturas (thumbnails) e qdo clica abre na mesma janela na parte maior.. Trabalho com Dramweaver
  Obrigado

  Responder comentário

• 3. Link quebrado

  Domingo, 31/10/2004, por regiscoimbra
  

  Esse link não está funcionando, Clique aqui para ir ao .html com o código do SlideShow. (http://www.imasters.com.br/colunistas/js_dhtml/11/imagesTeste.htm)

  Responder comentário

• 4. Link quebrado

  Sábado, 12/11/2005, por Mauryas
  

  este link não esta funcionando

  Responder comentário

• 5. Muito boa!!!

  Segunda-feira, 09/01/2006, por M´srcio
  

  Muito boa essa coluna... Está de parabéns Thiago...

  Responder comentário

• 6. Solicitação!

  Terça-feira, 11/07/2006, por Magskull Bone
  

  Gostaria infinitamente que fosse incluida a função stop nesse tutorial!
  :)

  Responder comentário

• 7. Imagens - SlideShow

  Domingo, 03/09/2006, por Benedicto Soares
  

  O link está quebrado como fazer para ver o funcionamento do script?

  Responder comentário

• 8. Download

  Segunda-feira, 16/10/2006, por Leandro De Jesus Jardim
  

  Poxa não consegui fazer, diz que vamos trabalhar com 3 arquivos mas não foram mostrados separados...Ficou complicado

  Responder comentário

• 9. Dá para gravar em MySql?

  Sábado, 23/12/2006, por Flavio dos Santos
  

  Grato por ter a iniciativa de ensinar como fazer. Gostaria que, ao clicar em uma imagem, gravar o clique no MySql e saltar para o site do cliente. Vc pode ensinar o caminho?
  Grato - Flavio - Bairro do Limão - SP

  Responder comentário

Sobre o autor

Thiago Prado Atua profissionalmente com desenvolvimento de projetos web em Flash, PHP e Java.

Indique para um amigo

Tags relacionadas

youtube ti microsoft php tecnologia windows crescimento seguranca mercado brasil criação firefox web lançamento android apple desenvolvimento internet twitter celular linux 3g yahoo mobile iphone google

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!