Tableless

Busca Menu

Criando slideshow do zero com javascript puro

Seja o primeiro a comentar por

Depois de criar um artigo no devmedia de como criar um slideshow do zero em Jquery sem plugins, recebi vários pedidos para fazer o mesmo com javascript, também pude notar que muitas pessoas estavam com dificuldade em colocar link nas imagens e os botões de anterior/próximo. Veremos neste artigo como criar um slideshow do zero apenas com javascript e uma dose elegante de CSS3, com controladores, legendas e links nas imagens.

Abaixo o resultado final do nosso slide:

Criando slideshow do zero com javascript puro

Resultado final do nosso slide

Estrutura HTML

Nossa estrutura html é bem simples, veja na listagem 1:

Listagem 1 – Estrutura html do slideshow

<figure>
   <span class="trs next"></span>
   <span class="trs prev"></span>

   <div id="slider">
      <a href="#" class="trs"><img src="imagem1.jpg" alt="Legenda da imagem 1" /></a>
      <a href="#" class="trs"><img src="imagem2.jpg" alt="Legenda da imagem 2" /></a>
   </div>

   <figcaption></figcaption>
</figure>

Onde:

<figure></figure> –> Figura que será responsável de gerenciar todos os elementos do nosso slide

<span class=”next trs”>, <span class=”prev trs”> –> Serão os controladores do nosso slide

<div id=”slide”> –> div que abriga as imagens do nosso slide, facilitará nosso controle no javascript

<figcaption> –> Legenda do slide, será baseada pelo o atributo “alt” das imagens

Let’s go! vamos agora estilizar nosso slide.

Estilo CSS

Abaixo na listagem 2, o nosso estilo css, não explicarei a fundo nossa estilização, irei focar apenas nos principais pontos

Listagem 2 – Estilo css

<style>
* {margin: 0; padding: 0;}
body {background: #000}
a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.5s;
    -moz-transition:all ease-out 0.5s;
    -o-transition:all ease-out 0.5s;
    -ms-transition:all ease-out 0.5s;
    transition:all ease-out 0.5s;}	
#slider {position: relative; z-index: 1;}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {background: #0190EE; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
.next {right: 10px;}
.next:before,.next:after {left: 21px;}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background: #fff;
    width: 1px;
    position: absolute;
}
.prev {left: 10px;}
.prev:before,.prev:after {left: 18px;}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
    figure {
    max-width: 937px;
    height: 354px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

figcaption {padding-left: 20px;color: #fff; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; background: rgba(1, 144, 238, 0.76); width: 100%; position: absolute; bottom: 0; left: 0; line-height: 55px; height: 55px; z-index: 5}
</style>

Onde:
.trs –> class que define a transição das imagens do nosso slide e dos nossos controladores
.ativo –> class que define qual imagem está ativa
figure:hover span –> faz com que mostre nossos controladores ao passar o mouse no nosso slide

Parece que tudo está indo bem, vamos começar a brincar agora com nosso slider, gogo ninja lvl2 😀

 

Javascript

Veremos cada passo do código javascript bem detalhado para que não haja dúvida alguma ao termino do post.

Primeiramente vamos criar uma função setaImagem e colocar para que ela rode quando a janela (window) for carregada:

Listagem 3 – Criação da função “setaImagem”

<script type="text/javascript">
   function setaImagem(){
   }
   window.addEventListener("load",setaImagem,false);
</script>

onde:
window.addEventListener(“load”,setaImagem,false); –> faz com que a função “setaImagem” seja executada quando a janela for carregada

Agora iremos criar nossa variável “settings” que receberá alguns objetos e funções anonimas.

Listagem 4 – Criando nossa varável “settings”, já com duas funções anonimas dentro, que são “legenda” e “primeiraImg”

 var settings = {
  primeiraImg: function(){
    elemento = document.querySelector("#slider a:first-child");
    elemento.classList.add("ativo");
    this.legenda(elemento);
  },
  legenda: function(obj){
    var legenda = obj.querySelector("img").getAttribute("alt");
    document.querySelector("figcaption").innerHTML = legenda;
  }
 }

Onde:

var settings = {} –> define uma variavel “settings” que conterá as configurações do nosso slide

primeiraImg: function(){…} –> Função que seta a imagem que aparecerá inicialmente no nosso slide

elemento = document.querySelector(“#slider a:first-child”); –> captura a primeira tag “<a>” da “div#slider” e coloca numa variavel elemento.

elemento.classList.add(“ativo”); –> coloca a classe ativo na tag capturada (elemento.classList.add(“ativo”)).

this.legenda(elemento); –> chama a função anonima “legenda” e passa como parâmetro a variável elemento que acabamos de criar

legenda:function(obj){…} –> função anonima que coloca captura o atributo “alt” da tag “<img>” que tem como pai, o parâmetro determinado como “obj” e coloca como legenda do slideshow

var legenda = obj.querySelector(“img”).getAttribute(“alt”); –> captura o atributo “alt” da tag “<img>” que tem como pai, o parâmetro determinado como “obj” (que neste caso é a primeira tag “<a>”) e coloca numa variável legenda

document.querySelector(“figcaption”).innerHTML = legenda; –> coloca o html, que está dentro do atributo alt da variavel legenda, dentro da tag “<figcaption>” que neste caso é a nossa legenda do slideshow.

Até agora tudo certo, mas note que se você executar nosso documento, nada acontece, isto porque não chamamos nossa função de setar a imagem.

Listagem 5 – chamando nossa variavel settings e suas respectivas funções anonimas

//chama o slide
settings.primeiraImg();

//chama a legenda
settings.legenda(elemento);

//chama o slide à um determinado tempo
var intervalo = setInterval(settings.slide,4000);

Primeiro chamamos nossa função de setar a imagem no slideshow, depois setamos sua legenda e por fim, acionamos um temporizador que roda nosso slide a cada 4 segundos.

Vamos agora adicionar mais uma função à configuração do nosso slide, seu nome será “slide”. Esta função servirá para controlar as transições automáticas do nosso slideshow.

obs: Adicione a linha de código abaixo, dentro da variável settings

Listagem 6 – Criação da função slide

	slide: function(){
    elemento = document.querySelector(".ativo");
    if(elemento.nextElementSibling){
        elemento.nextElementSibling.classList.add("ativo");
        settings.legenda(elemento.nextElementSibling);
        elemento.classList.remove("ativo");
    }else{
        elemento.classList.remove("ativo");
        settings.primeiraImg();
    }
},

Primeiro criamos nossa função slide, dentro dela, capturamos a tag que contém a class “ativo” e colocamos numa variável “elemento”, logo em seguida fazemos uma verificação, se ouver uma tag após a tag “ativo” colocamos nesta outra tag a classe ativo, adicionamos a legenda dela no nosso slide e retiramos a classe ativo da nossa imagem que está ativa. Se não ouver nenhuma outra tag, tiramos a classe “ativo” da imagem que está ativa, e chamamos a função “primeiraImg” que servirá para setar a primeira imagem no nosso slide.

show de bola! nosso slide está rodando, mas note que nossos controladores ainda não funcionam, vamos agora fazer eles funcionarem.

Primeiro vamos criar nossa função que mostra a próxima imagem “próximo”:

Listagem 7 – Função “próximo”

	proximo: function(){
    clearInterval(intervalo);
    elemento = document.querySelector(".ativo");

    if(elemento.nextElementSibling){
        elemento.nextElementSibling.classList.add("ativo");
        settings.legenda(elemento.nextElementSibling);
        elemento.classList.remove("ativo");
    }else{
        elemento.classList.remove("ativo");
        settings.primeiraImg();
    }
    intervalo = setInterval(settings.slide,4000);
},

O processo da função anonima “proximo” é o mesmo da função slide, apenas adicionamos um clearInterval(intervalo), que irá limpar o temporizador(tempo de execução) do nosso slide, e ao final da função reiniciamos nosso temporizador.

Agora iremos criar a função para mostrar a imagem anterior

Listagem 8 – função “anterior”

 

anterior: function(){
	clearInterval(intervalo);
	elemento = document.querySelector(".ativo");

	if(elemento.previousElementSibling){
		elemento.previousElementSibling.classList.add("ativo");
		settings.legenda(elemento.previousElementSibling);
		elemento.classList.remove("ativo");
	}else{
		elemento.classList.remove("ativo");						
		elemento = document.querySelector("a:last-child");
		elemento.classList.add("ativo");
		this.legenda(elemento);
	}
	intervalo = setInterval(settings.slide,4000);
},

Esta função também é quase a mesma que a anterior, so mudamos onde tem “next”(próximo) e colocamos “previous”(anterior).

Ainda falta anexar o evento de click nos nossos controladores, segue abaixo

Listagem 9 – Anexando a função de clique nos controladores

	document.querySelector(".next").addEventListener("click",settings.proximo,false);
	document.querySelector(".prev").addEventListener("click",settings.anterior,false);

Obs: Coloque a função de clique nos controladores no final da função “setaImagem”

Disponibilizei nosso código no github para quem quiser contribuir ou esteja tendo algum problema no slide (clique aqui)

Bem amigos ninjas javascript’s, com isso terminamos nosso post, um forte abraço e até a próxima

Abaixo nosso código javascript completo:

<script type="text/javascript">
function setaImagem(){
    var settings = {
        primeiraImg: function(){
            elemento = document.querySelector("#slider a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");						
                elemento = document.querySelector("a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            document.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load",setaImagem,false);
</script>
Publicado no dia