Slider Js Set Interval

Transcript

Como criar um Slider com JavaScript e setInterval Autor: Emerson Shigueo Sugimoto, 2012 Passo a Passo de como criar um slider com Javascript setInterval e formatação CSS. O Código fonte final encontra-se na Figura 10 - Código Final. O slider permite a navegação entre as abas do slider, a pausa e despausa. Um exemplo em funcionamento do código (com alguns incrementos) pode ser visto no link (Figura 1 - http://www.bigoff.com.br/): http://www.bigoff.com.br/ Figura 1 - http://www.bigoff.com.br/ A motivação deste trabalho encontra-se na necessidade de se criar um Slider customizável e de fácil alteração, que use funções simples em javascript e de fácil manutenção. Este código é livre e pode ser alterado, desde que as informações do autor sejam mantidas, para isto basta adicionar a linha no início de seu código: /*author: Autor: Emerson Shigueo Sugimoto, 2012*/ 1 Resultado obtido (Figura 2): Figura 2 - Resultado obtido Arquivos (Figura 3 e Figura 4): Figura 3 – Arquivos Insira 4 imagens na pasta ‘imagens’, podem ser de qualquer tamanho. Para um melhor resultado melhor que sejam maiores ou iguais à 450x300 (Figura 4). Figura 4 - Imagens usadas As imagens usadas neste tutorial possuem as dimensões em cerca de 2560x1600. O CSS utilizado na página controla o tamanho das imagens no momento de exibi-las, portanto não se preocupe com os tamanhos. Se a imagem for muito pequena, o resultado não será o ideal, mais a técnica funciona mesmo assim. CSS usado (Figura 5): 2 Figura 5 - CSS A parte do código CSS que cuida do tamanho das imagens é (Figura 6): div#sliderImg img { max-width:100%; max-height:95%; width: auto; height: auto; border: 1px solid rgb(244, 244, 244); overflow:hidden; } Figura 6 - CSS – controle do tamanho das imagens As informações que irão popular o slider são definidas através de uma estrutura simples em javascript (Figura 7): Figura 7 - Dados das Ofertas Se quiser mais ou menos abas, basta adicionar ou remover a estrutura var ofertaN, onde N é o índice da oferta, e a respectiva entrada no vetor var ofertas. 5 Javascritpt com o setInterval que controla o slider Figura 8. Para aumentar ou diminuir o tempo (em ms) da animação do slider, altere a variável timeJS. Figura 8 - SetInterval HTML e a chamada em Javascript que inicia o slider (Figura 9):