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 formatao CSS. O Cdigo fonte final encontra-se na Figura 10 - Cdigo Final. O slider permite a navegao entre as abas do slider, a pausa e despausa. Um exemplo em funcionamento do cdigo (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 motivao deste trabalho encontra-se na necessidade de se criar um Slider customizvel e de fcil alterao, que use funes simples em javascript e de fcil manuteno. Este cdigo livre e pode ser alterado, desde que as informaes do autor sejam mantidas, para isto basta adicionar a linha no incio de seu cdigo:
/*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 dimenses em cerca de 2560x1600. O CSS utilizado na pgina controla o tamanho das imagens no momento de exibi-las, portanto no se preocupe com os tamanhos. Se a imagem for muito pequena, o resultado no ser o ideal, mais a tcnica funciona mesmo assim. CSS usado (Figura 5): 2

<style type="text/CSS"> /*author: Autor: Emerson Shigueo Sugimoto, 2012*/ * {margin:0;padding:0;} img, input[type=image] {border:0;} input, select, textarea,input[type="submit"]:focus{outline:0 none;} body {margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;fontsize:8pt;background:#FFF;} .clear {clear:both;} .sliderFrame { font: 11px Arial, sans-serif; margin:15pt auto; padding:25px; /*position: relative;*/ width: 900px; height: 300px; border: 1px solid rgb(200, 200, 200); } .sliderFrame #tmpSlideshowControls a {text-decoration:none; color:inherit;} div#sliderImg, .sliderInfo {float:left;} div#sliderImg { width:450px; height:332px; overflow:hidden; } div#sliderImg img { max-width:100%; max-height:95%; width: auto; height: auto; border: 1px solid rgb(244, 244, 244); overflow:hidden; } .sliderInfo { margin-left:15pt; width:425px; height:332px; overflow:hidden; } span#sliderTitulo { color: #b90f23; text-transform: uppercase; font: 14px Arial, sans-serif; margin:10px 0; } .sliderFrame .sliderInfo p { margin:10pt 0; font: 11px Arial, sans-serif; line-height: 1.75em; } .sliderDePor {font-size:13px; line-height:1.4em; margin-bottom:8pt;} .sliderDePor div {float:left;} .clsDe {text-decoration:line-through;color: #b90f23;} /*------------------*/ div#tmpSlideshowControls { /*position: absolute;*/ bottom: 15px; /*30*/ right: 11px; 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); } </style>

Figura 5 - CSS A parte do cdigo 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 informaes que iro popular o slider so definidas atravs de uma estrutura simples em javascript (Figura 7):
<script type="text/javascript"> /*author: Autor: Emerson Shigueo Sugimoto, 2012*/ //--Dados das Ofertas ---// var oferta1 = { 'titulo':'Oferta 1', 'descSimples':'Venha se divertir em todas as esta&ccedil;&otilde;es do ano ! Ingresso para 1 dia no Rio Water Planet, por R$ 42,90, ou passaporte v&aacute;lido por 2 anos para 2 ou 4 ou 10 pessoas, por menos de R$ 1 por dia', 'linkComprar':'#comprar1', 'linkOferta':'#linkOferta1', 'valorDe':7.89, 'valorPor':5.12, 'imgG':'imagens/001.jpg', 'imgP':'imagens/001.jpg', 'itensDescricao':['a oferta vlida para os estados de SP, RO e PR', 'aceitamos cartoes de credito', 'Todo dia um bom dia para se comprar'] } var oferta2 = { 'titulo':'Oferta 2', 'descSimples':'Titulo oferta 2 algo deve ser descrito nesta parte da oferta.. lol<br />descriion heres', 'linkComprar':'#comprar2', 'linkOferta':'#linkOferta2', 'valorDe':100.58, 'valorPor':95.63, 'imgG':'imagens/002.jpg', 'imgP':'imagens/002.jpg', 'itensDescricao':['aceitamos cartoes de credito', 'Todo dia um bom dia para se comprar', 'a oferta vlida para os estados de SP, RO e PR'] } var oferta3 = { 'titulo':'Oferta 3', 'descSimples':'Preciso de um titulo<br/>lookkkff', 'linkComprar':'#comprar3', 'linkOferta':'#linkOferta3', 'valorDe':5639.01, 'valorPor':1659.21,

'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 += '<a href="javascript:showofe('+i+');"><div class="tmpSlideshowControl"><span>'+(i+1)+'</span></div></a>'; } indices += '<a href="javascript:parar();" id="sliderAParar"><div class="tmpSlideshowControl" style="width=200px;" id="sliderPararContinuar"><span>::</span></div></a>'; document.getElementById('tmpSlideshowControls').innerHTML = indices; </script>

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.

Javascritpt com o setInterval que controla o slider Figura 8. Para aumentar ou diminuir o tempo (em ms) da animao do slider, altere a varivel timeJS.
<script type="text/javascript"> /*author: Autor: Emerson Shigueo Sugimoto*/ var timeJS = new Number(5500); //3500 | 5500 var indice = 0; var intervalo; //Funo setInterval function iniciar(){ clearInterval(intervalo); intervalo = window.setInterval(trocarOfertas, timeJS); document.getElementById('sliderPararContinuar').innerHTML = '<span>::</span>'; document.getElementById('sliderAParar').href = 'javascript:parar();'; } function parar(){ clearInterval(intervalo); document.getElementById('sliderPararContinuar').innerHTML = '<span>&gt;</span>'; document.getElementById('sliderAParar').href = 'javascript:continuar();'; } function continuar(){ indice++; iniciar(); } function showofe(index){ parar(); if (index >= ofertas.length){index = 0;} indice = index; trocarOfertas(); iniciar(); } //-----------------------------------------------------function trocarOfertas(){ //parseInt(Math.random()*(ofertas.length)) /*randomico*/ if (indice >= ofertas.length){indice = 0;} var ofe = ofertas[indice++]; var var var var var tit = document.getElementById('sliderTitulo'); img = document.getElementById('sliderImg'); dof = document.getElementById('sliderDadosOferta'); deSlider = document.getElementById('sliderDe'); porSlider = document.getElementById('sliderPor');

tit.innerHTML = ofe.titulo; img.innerHTML = '<a href="'+ofe.linkOferta+'" title="'+ofe.titulo+'" target="_self">'+getImagem(ofe.imgG, ofe.imgP)+'</a>'; dof.innerHTML = ofe.descSimples + '<br />' + getUl(ofe.itensDescricao); deSlider.innerHTML = ''; var de = ofe.valorDe; var tx = ''; if (de == '0,00' || de == '0.00' || de == '0') {tx = '';} else { de = String(de).replace('.', ','); tx = 'De: R$ ' + de;} deSlider.innerHTML = tx; porSlider.innerHTML = 'Por: R$ ' + String(ofe.valorPor).replace('.', ','); } function getImagem(imgG, imgP) {

var escreverIMG = '<img src="imagens/imagem_nao_disponivel.jpg" border="0" />'; if (imgP != '' || imgG != '') { if (imgG != '') { escreverIMG = '<img src="' + imgG + '" border="0" alt="Imagem" />'; //escreverIMG = '<img src="' + imgG + '" border="0" alt="Imagem" style="height:100px; width:100px;" />'; } else if (imgP != '') { escreverIMG = '<img src="' + imgP + '" border="0" alt="Imagem" />'; } } return escreverIMG; } function getUl(vet){ var ul = '<ul>'; for (i = 0; i < vet.length; i++){ul += '<li>'+vet[i]+';</li>';} ul += '</ul>'; return ul; } </script>

Figura 8 - SetInterval

HTML e a chamada em Javascript que inicia o slider (Figura 9):

<div class="sliderFrame"> <div id="sliderImg"><a href="#" title="Oferta X" target="_self"><img src="imagens/001.jpg" width="1920" height="1200" border="0" /></a></div> <div class="sliderInfo"> <span id="sliderTitulo">Oferta 1</span> <p id="sliderDadosOferta"> 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. </p> <br /> <div style="clear:both;"></div> <div class="sliderDePor"> <div> <span class="clsDe" id="sliderDe">De: R$ 458,26</span><br /> <span id="sliderPor">Por: R$ 125,26</span><br /> </div> </div> <div style="clear:both;"></div> </div> <div id="tmpSlideshowControls"></div> <div style="clear:both;"></div> </div> <script type="text/javascript"> document.getElementById('tmpSlideshowControls').innerHTML = indices;

//firstcall trocarOfertas(); iniciar(); </script> <div style="clear:both;"></div> </div>

Figura 9 - HTML e Chamada ao setInterval

Cdigo fonte final (Figura 10):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDER - SETINTERVAL</title> <style type="text/CSS"> /*author: Autor: Emerson Shigueo Sugimoto*/ * {margin:0;padding:0;} img, input[type=image] {border:0;} input, select, textarea,input[type="submit"]:focus{outline:0 none;} body {margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;fontsize:8pt;background:#FFF;} .clear {clear:both;} .sliderFrame { font: 11px Arial, sans-serif; margin:15pt auto; padding:25px; /*position: relative;*/ width: 900px; height: 300px; border: 1px solid rgb(200, 200, 200); } .sliderFrame #tmpSlideshowControls a {text-decoration:none; color:inherit;} div#sliderImg, .sliderInfo {float:left;} div#sliderImg { width:450px; height:332px; overflow:hidden; } div#sliderImg img { max-width:100%; max-height:95%; width: auto; height: auto; border: 1px solid rgb(244, 244, 244); overflow:hidden; } .sliderInfo { margin-left:15pt; width:425px; height:332px; overflow:hidden; } span#sliderTitulo { color: #b90f23; text-transform: uppercase; font: 14px Arial, sans-serif; margin:10px 0; } .sliderFrame .sliderInfo p { margin:10pt 0; font: 11px Arial, sans-serif; line-height: 1.75em; } .sliderDePor {font-size:13px; line-height:1.4em; margin-bottom:8pt;} .sliderDePor div {float:left;} .clsDe {text-decoration:line-through;color: #b90f23;} /*------------------*/ div#tmpSlideshowControls { /*position: absolute;*/ bottom: 15px; /*30*/ right: 11px;

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); } </style> <script type="text/javascript"> /*author: Autor: Emerson Shigueo Sugimoto*/ //--Dados das Ofertas ---// var oferta1 = { 'titulo':'Oferta 1', 'descSimples':'Venha se divertir em todas as esta&ccedil;&otilde;es do ano ! Ingresso para 1 dia no Rio Water Planet, por R$ 42,90, ou passaporte v&aacute;lido por 2 anos para 2 ou 4 ou 10 pessoas, por menos de R$ 1 por dia', 'linkComprar':'#comprar1', 'linkOferta':'#linkOferta1', 'valorDe':7.89, 'valorPor':5.12, 'imgG':'imagens/001.jpg', 'imgP':'imagens/001.jpg', 'itensDescricao':['a oferta vlida para os estados de SP, RO e PR', 'aceitamos cartoes de credito', 'Todo dia um bom dia para se comprar'] } var oferta2 = { 'titulo':'Oferta 2', 'descSimples':'Titulo oferta 2 algo deve ser descrito nesta parte da oferta.. lol<br />descriion heres', 'linkComprar':'#comprar2', 'linkOferta':'#linkOferta2', 'valorDe':100.58, 'valorPor':95.63, 'imgG':'imagens/002.jpg', 'imgP':'imagens/002.jpg', 'itensDescricao':['aceitamos cartoes de credito', 'Todo dia um bom dia para se comprar', 'a oferta vlida para os estados de SP, RO e PR'] } var oferta3 = { 'titulo':'Oferta 3', 'descSimples':'Preciso de um titulo<br/>lookkkff', 'linkComprar':'#comprar3', 'linkOferta':'#linkOferta3', 'valorDe':5639.01, 'valorPor':1659.21, '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',

10

'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 += '<a href="javascript:showofe('+i+');"><div class="tmpSlideshowControl"><span>'+(i+1)+'</span></div></a>'; } indices += '<a href="javascript:parar();" id="sliderAParar"><div class="tmpSlideshowControl" style="width=200px;" id="sliderPararContinuar"><span>::</span></div></a>'; document.getElementById('tmpSlideshowControls').innerHTML = indices; </script> <script type="text/javascript"> /*author: Autor: Emerson Shigueo Sugimoto*/ var timeJS = new Number(5500); //3500 | 5500 var indice = 0; var intervalo; //Funo setInterval function iniciar(){ clearInterval(intervalo); intervalo = window.setInterval(trocarOfertas, timeJS); document.getElementById('sliderPararContinuar').innerHTML = '<span>::</span>'; document.getElementById('sliderAParar').href = 'javascript:parar();'; } function parar(){ clearInterval(intervalo); document.getElementById('sliderPararContinuar').innerHTML = '<span>&gt;</span>'; document.getElementById('sliderAParar').href = 'javascript:continuar();'; } function continuar(){ indice++; iniciar(); } function showofe(index){ parar(); if (index >= ofertas.length){index = 0;} indice = index; trocarOfertas(); iniciar(); } //-----------------------------------------------------function trocarOfertas(){ //parseInt(Math.random()*(ofertas.length)) /*randomico*/ if (indice >= ofertas.length){indice = 0;} var ofe = ofertas[indice++]; var var var var var tit = document.getElementById('sliderTitulo'); img = document.getElementById('sliderImg'); dof = document.getElementById('sliderDadosOferta'); deSlider = document.getElementById('sliderDe'); porSlider = document.getElementById('sliderPor');

tit.innerHTML = ofe.titulo;

11

img.innerHTML = '<a href="'+ofe.linkOferta+'" title="'+ofe.titulo+'" target="_self">'+getImagem(ofe.imgG, ofe.imgP)+'</a>'; dof.innerHTML = ofe.descSimples + '<br />' + getUl(ofe.itensDescricao); deSlider.innerHTML = ''; var de = ofe.valorDe; var tx = ''; if (de == '0,00' || de == '0.00' || de == '0') {tx = '';} else { de = String(de).replace('.', ','); tx = 'De: R$ ' + de;} deSlider.innerHTML = tx; porSlider.innerHTML = 'Por: R$ ' + String(ofe.valorPor).replace('.', ','); } function getImagem(imgG, imgP) { var escreverIMG = '<img src="imagens/imagem_nao_disponivel.jpg" border="0" />'; if (imgP != '' || imgG != '') { if (imgG != '') { escreverIMG = '<img src="' + imgG + '" border="0" alt="Imagem" />'; //escreverIMG = '<img src="' + imgG + '" border="0" alt="Imagem" style="height:100px; width:100px;" />'; } else if (imgP != '') { escreverIMG = '<img src="' + imgP + '" border="0" alt="Imagem" />'; } } return escreverIMG; } function getUl(vet){ var ul = '<ul>'; for (i = 0; i < vet.length; i++){ul += '<li>'+vet[i]+';</li>';} ul += '</ul>'; return ul; } </script> </head> <body> <div class="sliderFrame"> <div id="sliderImg"><a href="#" title="Oferta X" target="_self"><img src="imagens/001.jpg" width="1920" height="1200" border="0" /></a></div> <div class="sliderInfo"> <span id="sliderTitulo">Oferta 1</span> <p id="sliderDadosOferta"> 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. </p> <br /> <div style="clear:both;"></div> <div class="sliderDePor"> <div> <span class="clsDe" id="sliderDe">De: R$ 458,26</span><br />

12

<span id="sliderPor">Por: R$ 125,26</span><br /> </div> </div> <div style="clear:both;"></div> </div> <div id="tmpSlideshowControls"></div> <div style="clear:both;"></div> </div> <script type="text/javascript"> document.getElementById('tmpSlideshowControls').innerHTML = indices; //firstcall trocarOfertas(); iniciar(); </script> <div style="clear:both;"></div> </div> </body> </html>

Figura 10 - Cdigo Final

13