Presentación de diapositivas de JavaScript con funciones

• Mayo 5, 2024

En artículos anteriores creamos e hicimos algunos ajustes en una presentación de diapositivas JavaScript muy simple. Esta presentación de diapositivas es completamente funcional e incluso muestra algo apropiado para las personas que no tienen JavaScript, pero me gustaría que la miniatura de la imagen que estoy mostrando actualmente se vea diferente de las otras miniaturas. Me decidí a usar una identificación CSS llamada "actual" que hacía que las imágenes fueran semitransparentes y agregaba un borde rojo delgado para la miniatura seleccionada. En mi último artículo, obtuve este comportamiento para la miniatura seleccionada inicialmente, pero cuando seleccioné una nueva miniatura, la nueva miniatura no cambió y la miniatura inicial mantuvo el estilo seleccionado.

En la versión anterior de mi presentación de diapositivas, cuando un usuario hace clic en una miniatura, se muestran las imágenes grandes asociadas. Lo que quiero que haga es cambiar la imagen grande, establecer la miniatura de la imagen seleccionada previamente para volver a la normalidad y hacer que esta miniatura se muestre con el estilo especial para la imagen seleccionada. Como ahora estoy haciendo varias cosas cuando se hace clic en la miniatura, cambié de poner todo mi código en el atributo onClick del img etiqueta para usar una función. Las funciones de JavaScript suelen ir en el cabeza sección del HTML para que se carguen y estén listos cuando se cargue el cuerpo de la página. Se pueden insertar directamente entre guión etiquetas o poner y un archivo e incluido. Para programas cortos, o cuando estoy codificando activamente, me resulta más fácil poner mi código directamente en la página como lo hice aquí.

Podría haber usado una función para cada miniatura, pero dado que todo lo que cambia de miniatura a miniatura es el nombre de la imagen y la identificación de la miniatura (y usé el nombre de la imagen para la identificación), escribí una sola función que tomó id como argumento y lo usé para crear el nombre de imagen apropiado agregando ".jpg". Llamé a mi función displayLarge.

función displayLarge (id) {
// cambia la imagen grande
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// establece el estilo de la miniatura anterior de nuevo al predeterminado
document.getElementById ("current"). id = oldID;
// tome nota de la identificación antes de cambiarla
oldID = id
// marca la miniatura como actual con el estilo actual
document.getElementById (id) .id = "actual";
}

Para que esta función funcione la primera vez, también tuve que dar una definición inicial para ID antigua, la variable que estoy usando para recordar la identificación original de la miniatura que está seleccionada actualmente. Todo este código va en la sección de cabecera de la página web, de modo que se carga antes de que se cargue la página.

Finalmente, cambié el HTML de las miniaturas para llamar a mi función. El HTML para mi presentación de diapositivas ahora se ve así:











Puede ver un ejemplo funcional de este código aquí.

Instrucciones De Vídeo: CURSO DE JAVA Y JAVASCRIPT - INTRODUCCIÓN (CONCEPTOS - INSTALACIÓN DE PROGRAMAS) (Mayo 2024).