Baixe Slider js set Interval e outras Slides em PDF para Informática, somente na Docsity!
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/
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):
height: 24px; /36/ color: #554d31; font: 14px Arial, sans-serif; text-align: center; cursor: pointer; } div.tmpSlideshowControl span { line-height: 27px; vertical-align: middle; } div.tmpSlideshowControl:hover { border: 1px solid rgb(161, 155, 137); }
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):
'imgG':'imagens/003.jpg', 'imgP':'imagens/003.jpg', 'itensDescricao':['desc1', 'jjajkl omsdklfm sdf', 'desc 3'] } var oferta4 = { //simula data nula e sem valor de 'titulo':'Oferta 4', 'descSimples':'sdfsadf asdfsdaf adsfasdfasdf', 'linkComprar':'#comprar4', 'linkOferta':'#linkOferta4', 'valorDe':0.00, 'valorPor':17.20, 'imgG':'imagens/004.jpg', 'imgP':'imagens/004.jpg', 'itensDescricao':['desc4'] } var ofertas = [oferta1, oferta2, oferta3, oferta4];
var indices = ''; //pre load for(var i = 0; i < ofertas.length; i++){ new Image().src = ofertas[i].imgG; new Image().src = ofertas[i].imgP; indices += ''+(i+1)+''; } indices += '::';
document.getElementById('tmpSlideshowControls').innerHTML = indices;
Figura 7 - Dados das Ofertas
Se quiser mais ou menos abas, basta adicionar ou remover a estrutura var oferta N ,
onde N é o índice da oferta, e a respectiva entrada no vetor var ofertas.
var escreverIMG = ''; if (imgP != '' || imgG != '') { if (imgG != '') { escreverIMG = ''; //escreverIMG = ''; } else if (imgP != '') { escreverIMG = ''; } } return escreverIMG; } function getUl(vet){ var ul = ''; for (i = 0; i < vet.length; i++){ul += ''+vet[i]+';';} ul += ''; return ul; }
Figura 8 - SetInterval
HTML e a chamada em Javascript que inicia o slider (Figura 9):
Oferta 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero.
De: R$ 458,26 Por: R$ 125,26
//firstcall trocarOfertas(); iniciar();
Figura 9 - HTML e Chamada ao setInterval
width: 300px; /175/
div.tmpSlideshowControl { border: 1px solid #e1dece; float: left; margin: 0 5px 0 0; width: 28px; /38/ height: 24px; /36/ color: #554d31; font: 14px Arial, sans-serif; text-align: center; cursor: pointer; } div.tmpSlideshowControl span { line-height: 27px; vertical-align: middle; } div.tmpSlideshowControl:hover { border: 1px solid rgb(161, 155, 137); }
'itensDescricao':['desc4'] } var ofertas = [oferta1, oferta2, oferta3, oferta4];
var indices = ''; //pre load for(var i = 0; i < ofertas.length; i++){ new Image().src = ofertas[i].imgG; new Image().src = ofertas[i].imgP; indices += ''+(i+1)+''; } indices += '::';
document.getElementById('tmpSlideshowControls').innerHTML = indices;
Por: R$ 125,26
Figura 10 - Código Final
