Apresentação de slides em JavaScript com funções

• Abril 25, 2024

Nos artigos anteriores, criamos e fizemos alguns ajustes em uma apresentação de slides JavaScript muito simples. Esta apresentação de slides é totalmente funcional e até exibe algo apropriado para pessoas que não têm JavaScript, mas eu gostaria que a miniatura da imagem que estou exibindo no momento parecesse diferente das outras miniaturas. Decidi usar um código CSS chamado "current", que tornava as imagens semitransparentes e adicionava uma fina borda vermelha para a miniatura selecionada. No meu último artigo, eu obtive esse comportamento para a miniatura selecionada inicialmente, mas quando selecionei uma nova miniatura, a nova miniatura não mudou e a miniatura inicial manteve o estilo selecionado.

Na versão anterior da minha apresentação de slides, quando um usuário clica em uma miniatura, as imagens grandes associadas são exibidas. O que eu quero fazer é alterar a imagem grande, definir a miniatura da imagem selecionada anteriormente para voltar ao normal e fazer essa miniatura ser exibida com o estilo especial da imagem selecionada. Como agora estou fazendo várias coisas quando a miniatura é clicada, deixei de colocar todo o meu código no atributo onClick do img tag para usar uma função. As funções JavaScript geralmente vão no cabeça seção do HTML para que eles estejam carregados e prontos quando o corpo da página for carregado. Eles podem ser inseridos diretamente entre roteiro tags ou colocar e um arquivo e incluído. Para programas curtos, ou quando estou codificando ativamente, acho mais fácil colocar meu código diretamente na página, como fiz aqui.

Eu poderia ter usado uma função para cada miniatura, mas como tudo o que muda de miniatura para miniatura é o nome da imagem e o ID da miniatura (e usei o nome da imagem para a ID), escrevi uma única função que utilizava o id como argumento e usou isso para criar o nome de imagem apropriado adicionando ".jpg" a ele. Chamei minha função displayLarge.

função displayLarge (id) {
// altera a imagem grande
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// define o estilo da miniatura anterior de volta ao padrão
document.getElementById ("current"). id = oldID;
// anote o ID antes de alterá-lo
oldID = id
// marca a miniatura como atual com o estilo atual
document.getElementById (id) .id = "atual";
}

Para que essa função funcionasse pela primeira vez, também tive que dar uma definição inicial para oldID, a variável que estou usando para lembrar o ID original da miniatura atualmente selecionada. Todo esse código está na seção principal da página da web, para que seja carregado antes do carregamento da página.

Finalmente, mudei o HTML das miniaturas para chamar minha função. O HTML da minha apresentação de slides agora fica assim:











Você pode ver um exemplo prático desse código aqui.

Instruções De Vídeo: Isomorphics Javascript | Diogo Beato | Papo Reto | T3E16 (Abril 2024).