Como construir um SlideShow JavaScript em 3 etapas fáceis

Se você leu nosso guia sobre Como fazer um website , você pode estar se perguntando o que fazer a seguir para melhorar suas habilidades. Fazer uma apresentação de slides de fotos é uma tarefa surpreendentemente fácil e que pode ensinar a você habilidades valiosas necessárias para conseguir um trabalho de programação.

Hoje vou mostrar como construir uma apresentação de slides em JavaScript do zero. Vamos começar!

Pré-requisitos

Você precisará saber algumas coisas antes de começar a codificar. Junto com um navegador da web apropriado e editor de texto de sua escolha (eu recomendo Texto Sublime ), você precisará de alguma experiência com HTML , CSS , JavaScript , e jQuery .

Se você não está tão confiante em suas habilidades, certifique-se de ler nosso guia para usar o Document Object Model e estas dicas para aprender CSS. Se você está confiante com o JavaScript, mas nunca usou jQuery antes, verifique nosso guia básico para jQuery.

1. Primeiros passos

Esta apresentação de slides requer vários recursos:

Suporte para imagens
Controles para alterar imagens
Uma legenda de texto
Modo automático

Parece uma lista simples de recursos. O modo automático avançará automaticamente as imagens para a próxima na sequência. Aqui está o esboço que fiz antes de escrever qualquer código:

Se você está se perguntando por que se preocupar em planejar, dê uma olhada nesses piores erros de programação da história. Este projeto não matará ninguém, mas é crucial ter um conhecimento sólido do código e dos procedimentos de planejamento antes de trabalhar em um código maior - mesmo que seja apenas um esboço.

Aqui está o HTML inicial de que você precisa para começar. Salve em um arquivo com um nome apropriado, como index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Esta é a aparência do código:

É um pouco lixo, não é? Vamos decompô-lo antes de melhorá-lo.

Este código contém 'padrão' HTML , cabeça , estilo , roteiro , e corpo Tag. Essas peças são componentes essenciais de qualquer site. JQuery está incluído através do Google CDN - nada único ou especial até agora.

Dentro do corpo está um div com um id de showContainer . Este é um invólucro ou recipiente externo para armazenar a apresentação de slides. Você vai melhorar isso mais tarde com CSS. Dentro desse contêiner, existem três blocos de código, cada um com uma finalidade semelhante.

Uma classe pai é definida com um nome de classe de imageContainer :

Isso é usado para armazenar um único slide - uma imagem e uma legenda são armazenadas dentro deste contêiner. Cada contêiner possui um id único, consistindo nos caracteres no_ e um número. Cada contêiner possui um número diferente, de um a três.

Como etapa final, uma imagem é referenciada e a legenda é armazenada dentro de um div com o rubrica classe:

Dog

Criei minhas imagens com nomes de arquivo numéricos e os armazenei dentro de uma pasta chamada Imagens . Você pode chamar o seu do que quiser, desde que atualize o HTML para corresponder.

Se você gostaria de ter mais ou menos imagens em sua apresentação de slides, simplesmente copie e cole ou exclua os blocos de código com o imageContainer classe, lembrando-se de atualizar os nomes e ids dos arquivos conforme necessário.

Finalmente, os botões de navegação são criados. Eles permitem que o usuário navegue pelas imagens:

 ❮  
 ❯

Esses Entidade HTML códigos são usados para exibir as setas para frente e para trás, de maneira semelhante ao funcionamento das fontes de ícone.

2. O CSS

Agora que a estrutura principal está no lugar, é hora de fazer com que pareça bonito . Esta será a aparência após este novo código:

Adicione este CSS entre o seu estilo Tag:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

Isso parece muito melhor agora, certo? Vamos dar uma olhada no código.

Estou usando imagens de amostra que são todas 670 x 503 pixels , portanto, esta apresentação de slides foi projetada principalmente em torno de imagens desse tamanho. Você precisará ajustar o CSS de forma adequada se quiser usar imagens de tamanhos diferentes. Eu recomendo que você redimensione suas imagens para tamanhos correspondentes - imagens diferentes de dimensões diferentes causarão problemas de estilo.

Maioria deste CSS é autoexplicativo. Existe um código para definir o tamanho do container para armazenar as imagens, centralizar tudo, especificar a fonte, junto com o botão e a cor do texto. Existem alguns estilos que você pode não ter visto antes:

cursor: ponteiro - Isso muda o cursor de uma seta para um dedo que aponta quando você move o cursor sobre os botões.
opacidade: 0,65 - Isso aumenta a transparência dos botões.
seleção do usuário: nenhum - Isso garante que você não possa destacar acidentalmente o texto nos botões.

Você pode ver o resultado da maior parte desse código nos botões:

A parte mais complexa aqui é esta linha de aparência estranha:

.imageContainer:not(:first-child) {

Pode parecer bastante incomum, no entanto, é bastante autoexplicativo.

Primeiro, ele visa quaisquer elementos com o imageContainer classe. o :não() a sintaxe afirma que quaisquer elementos dentro dos colchetes devem ser excluído deste estilo. finalmente, o :primeiro filho a sintaxe afirma que este CSS deve ter como alvo qualquer elemento que corresponda ao nome mas ignore o primeiro elemento. A razão para isso é simples. Como esta é uma apresentação de slides, apenas uma imagem por vez é necessária. Este CSS esconde todas as imagens exceto a primeira.

3. O JavaScript

A última peça do quebra-cabeça é o JavaScript. Esta é a lógica para fazer a apresentação de slides funcionar corretamente.

Adicione este código ao seu roteiro marcação:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Pode parecer contra-intuitivo, mas vou pular os blocos iniciais de código e pular direto para a explicação do código no meio - não se preocupe, eu explico todo o código!

Você precisa definir duas variáveis. (Veja como definir variáveis em JavaScript.) Essas variáveis podem ser consideradas as principais variáveis de configuração para a apresentação de slides:

var currentImage = 1;  
var totalImages = 3;

Eles armazenam o número total de imagens na apresentação de slides e o número da imagem inicial. Se você tiver mais imagens, basta alterar o totalImages variável para o número total de imagens que você tem.

As duas funções aumentarImagem e diminuirImage avançar ou recuar o imagem atual variável. Se esta variável for menor que um, ou maior que totalImages , ele é redefinido para um ou totalImages . Isso garante que a apresentação de slides será repetida assim que chegar ao fim.

De volta ao código no início. Este código 'direciona' os botões seguinte e anterior. Quando você clica em cada botão, ele chama o apropriado aumentar ou diminuir métodos. Depois de concluído, ele simplesmente esmaece a imagem na tela e aparece na nova imagem (conforme definido pelo imagem atual variável).

o Pare() método é integrado ao jQuery. Isso cancela todos os eventos pendentes. Isso garante que cada pressionamento de botão seja suave e significa que você não terá 100 pressionamentos de botões, todos esperando para serem executados, caso você enlouqueça com o mouse. o fadeIn (1) e fadeOut (1) métodos fade in ou out nas imagens, conforme necessário. O número especifica a duração do fade em milissegundos. Tente alterar para um número maior, como 500. Um número maior resulta em um tempo de transição mais longo. No entanto, vá longe demais e você poderá começar a ver eventos estranhos ou 'tremulações' entre as alterações da imagem. Aqui está a apresentação de slides em ação:

Avanço Automático

Esta apresentação de slides parece muito boa agora, mas há um último toque final necessário. O avanço automático é um recurso que realmente fará com que esta apresentação de slides brilhe. Após um determinado período de tempo, cada imagem avançará automaticamente para a próxima. O usuário ainda pode navegar para frente ou para trás, no entanto.

o que você pode fazer com uma impressora 3d em casa

Este é um trabalho fácil com jQuery. Um cronômetro precisa ser criado para executar seu código a cada X segundos. Em vez de escrever um novo código, no entanto, a coisa mais fácil a fazer é emular um 'clique' no botão da próxima imagem e deixar que o código existente faça todo o trabalho.

Aqui está o novo JavaScript de que você precisa - adicione-o após o diminuirImage função:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Não há muito acontecendo aqui. o window.setInterval método executará um pedaço de código regularmente, conforme definido pelo tempo especificado no final. A Hora 2500 (em milissegundos) significa que a apresentação de slides avançará a cada 2,5 segundos. Um número menor significa que cada imagem avançará em um ritmo mais rápido. o clique O método aciona os botões para executar o código como se um usuário tivesse clicado no botão com o mouse.

Se você estiver pronto para seu próximo desafio de JavaScript, tente construir um site com um construtor de sites estático como GatsbyJS ou uma estrutura de front-end como Vue. Se você é um aprendiz de Ruby, Jekyll também é uma opção. Veja como Jekyll e GatsbyJS se enfrentam.

Crédito da imagem: Tharanat Sardsri via Shutterstock.com

Compartilhado Compartilhado Tweet O email Os 8 melhores sites para baixar audiolivros gratuitamente

Os audiolivros são uma ótima fonte de entretenimento e muito mais fáceis de digerir. Aqui estão os oito melhores sites onde você pode baixá-los gratuitamente.

Leia a seguir Tópicos relacionados

Programação
JavaScript
Designer de Web

Sobre o autor Joe Coburn(136 artigos publicados)

Joe é graduado em Ciência da Computação pela University of Lincoln, no Reino Unido. Ele é um desenvolvedor de software profissional e, quando não está pilotando drones ou escrevendo música, pode ser encontrado tirando fotos ou produzindo vídeos.

Mais de Joe Coburn

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever