Apresentação de slides em JavaScript com CSS

• Pode 4, 2024

Em um artigo anterior, criamos 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 não possui todos os recursos que eu gostaria de ter para o meu site. Em particular, gostaria que a miniatura da imagem que estou exibindo atualmente parecesse diferente das outras miniaturas. Como os estilos são uma boa maneira de fazer isso, começarei convertendo todos os atributos do meu HTML existente em CSS.

Primeiro, converti meu estilo existente para usar CSS. Se você não conhece o CSS, a maneira mais fácil de começar a experimentá-lo é colocá-lo entre estilo tags no cabeçalho do seu documento HTML. A tag inicial precisa de um atributo type para informar ao navegador que tipo de informação de estilo você está usando, portanto, deve ser assim:



A conversão inicial para CSS foi fácil, pois apenas a imagem grande possuía informações de estilo e já possuía um Eu iria atributo que estava sendo usado para fins de JavaScript.

#largeImage {
borda: 2px preto sólido;
largura: 544px;
altura: 408px;
}

Eu não incluí anteriormente as informações de tamanho das miniaturas, mas adicionei uma classe chamada polegares e defina as tags de imagem nessa classe para definir o tamanho de 40 por 40 pixels. Isso significa que, mesmo que eu carregue acidentalmente imagens muito grandes ou pequenas para miniaturas, elas serão forçadas a exibir no tamanho de miniatura.

img.thumbs {
borda: nenhuma;
largura: 40 px;
altura: 40px;
}

Eu também adicionei um apresentação de slides classe para realizar a apresentação de slides inteira. Isso permitirá que eu faça coisas como adicionar uma borda ou alterar a cor do plano de fundo de toda a apresentação de slides, se desejar. Neste ponto, eu estou apenas usando-o para definir a altura máxima para a altura da imagem grande, porque quando adiciono mais miniaturas, quero que elas fiquem ao lado da imagem grande em vez de se mover acima dela. Infelizmente, o Internet Explorer não suporta o atributo max-height, então ainda precisarei trabalhar mais sobre esse problema mais tarde.

.slideshow {
altura: 408px;
altura máxima: 408px;
}

Por fim, criei um estilo para a miniatura selecionada. Decidi que queria que minha miniatura selecionada fosse semitransparente e tivesse uma borda vermelha estreita. Como apenas uma imagem será selecionada por vez, eu decidi usar um ID chamado "current" para esse fim. A vantagem de usar CSS é que eu posso alterar a aparência a qualquer momento sem alterar o código. O estilo fica assim:

img # atual {
borda: 1px vermelho sólido;
filtro: alfa (opacidade = 50);
-moz-opacidade: 0,5;
opacidade: 0,5;
}

Aqui vemos um código para lidar com as diferenças do navegador novamente, o padrão exige o uso de um elemento de opacidade, mas os navegadores baseados no IE e no Mozilla ainda não suportam isso.

Por fim, alterei o HTML das miniaturas para usar os estilos e chamar minha função. O HTML da minha apresentação de slides agora fica assim:









Como não alteramos nosso JavaScript, a apresentação de slides ainda funciona, mas agora temos mais estilo e nossa apresentação é separada do HTML e do JavaScript. No entanto, temos um problema, enquanto a miniatura inicialmente selecionada é semitransparente com uma borda vermelha, permanece assim quando alteramos as imagens. Para corrigir isso, precisamos voltar ao nosso velho amigo JavaScript.

Você pode ver um exemplo de trabalho do código até agora aqui.

Instruções De Vídeo: Slide de Apresentação html e css (Pode 2024).