Home-theater-designers
Si ha leído nuestra guía sobre Cómo hacer un sitio web , es posible que se pregunte qué debe hacer a continuación para mejorar sus habilidades. Hacer una presentación de diapositivas de fotos es una tarea sorprendentemente fácil y puede enseñarle las habilidades valiosas necesarias para obtener un trabajo de programación.
Hoy les mostraré cómo crear una presentación de diapositivas en JavaScript desde cero. ¡Saltemos de inmediato!
Prerrequisitos
Necesitará saber algunas cosas antes de comenzar a codificar. Junto con un navegador web apropiado y un editor de texto de su elección (recomiendo Texto sublime ), necesitará algo de experiencia con HTML , CSS , JavaScript , y jQuery .
Si no está tan seguro de sus habilidades, asegúrese de leer nuestra guía para usar el Modelo de objetos de documento y estos consejos para aprender CSS. Si está seguro de JavaScript pero nunca antes ha usado jQuery, consulte nuestra guía básica de jQuery.
1. Primeros pasos
Esta presentación de diapositivas requiere varias características:
- Soporte para imágenes
- Controles para cambiar imágenes
- Una leyenda de texto
- Modo automatico
Parece una simple lista de características. El modo automático avanzará automáticamente las imágenes a la siguiente en la secuencia. Aquí está el boceto que hice antes de escribir cualquier código:
Si se pregunta por qué molestarse en planificar, eche un vistazo a estos peores errores de programación de la historia. Este proyecto no hará que nadie mate, pero es crucial tener una comprensión sólida del código y los procedimientos de planificación antes de trabajar en un código más grande, incluso si es solo un boceto.
Aquí está el HTML inicial que necesita para comenzar. Guárdelo en un archivo con un nombre apropiado, como index.html :
|_+_|Así es como se ve el código:
Es un poco basura, ¿no? Analicémoslo antes de mejorarlo.
Este código contiene 'estándar' HTML , cabeza , estilo , texto , y cuerpo etiquetas. Estas partes son componentes esenciales de cualquier sitio web. JQuery se incluye a través de Google CDN, nada único ni especial hasta ahora.
Dentro del cuerpo hay un div con una identificación de showContainer . Este es un envoltorio o contenedor externo para almacenar la presentación de diapositivas. Mejorará esto más adelante con CSS. Dentro de este contenedor, hay tres bloques de código, cada uno con un propósito similar.
Una clase padre se define con un nombre de clase de imageContainer :
|_+_|Esto se usa para almacenar una sola diapositiva; una imagen y un título se almacenan dentro de este contenedor. Cada contenedor tiene una identificación única, que consta de los caracteres en el_ y un número. Cada contenedor tiene un número diferente, de uno a tres.
Como paso final, se hace referencia a una imagen y el título se almacena dentro de un div con el subtítulo clase:
|_+_|Creé mis imágenes con nombres de archivo numéricos y las almacené dentro de una carpeta llamada Imagenes . Puede llamar al suyo como quiera, siempre que actualice el HTML para que coincida.
Si desea tener más o menos imágenes en su presentación de diapositivas, simplemente copie y pegue o elimine los bloques de código con el imageContainer class, recordando actualizar los nombres de archivo y los identificadores según sea necesario.
Finalmente, se crean los botones de navegación. Estos permiten al usuario navegar por las imágenes:
|_+_|Estas Entidad HTML Los códigos se utilizan para mostrar las flechas hacia adelante y hacia atrás, de forma similar a como funcionan las fuentes de iconos.
2. El CSS
Ahora que la estructura central está en su lugar, es hora de hacer que parezca lindo . Así es como se verá después de este nuevo código:
Agregue este CSS entre su estilo etiquetas:
|_+_|Eso se ve mucho mejor ahora, ¿verdad? Echemos un vistazo al código.
Estoy usando imágenes de muestra que son todas 670 x 503 píxeles , por lo que esta presentación de diapositivas se ha diseñado principalmente en torno a imágenes de ese tamaño. Deberá ajustar el CSS de forma adecuada si desea utilizar imágenes de un tamaño diferente. Le recomiendo que cambie el tamaño de sus imágenes para que coincidan; diferentes imágenes de diferentes dimensiones causarán problemas de estilo.
La mayoría de este CSS se explica por sí mismo. Hay un código para definir el tamaño del contenedor para almacenar las imágenes, alinear todo en el centro, especificar la fuente, junto con el botón y el color del texto. Hay algunos estilos con los que es posible que no se haya encontrado antes:
- cursor: puntero - Esto cambia el cursor de una flecha a un dedo que señala cuando mueve el cursor sobre los botones.
- opacidad: 0,65 - Esto aumenta la transparencia de los botones.
- selección de usuario: ninguno - Esto asegura que no pueda resaltar accidentalmente el texto en los botones.
Puede ver el resultado de la mayor parte de este código en los botones:
La parte más compleja aquí es esta línea de aspecto extraño:
|_+_|Puede parecer bastante inusual, sin embargo, se explica por sí mismo.
Primero, apunta a cualquier elemento con el imageContainer clase. los :no() la sintaxis establece que cualquier elemento dentro de los corchetes debe ser excluido de este estilo. Finalmente, el :primer hijo la sintaxis establece que este CSS debe apuntar a cualquier elemento que coincida con el nombre pero ignore el primer elemento. La razón de esto es simple. Como se trata de una presentación de diapositivas, solo se requiere una imagen a la vez. Este CSS oculta todas las imágenes excepto la primera.
3. El JavaScript
La última pieza del rompecabezas es JavaScript. Esta es la lógica para que la presentación de diapositivas funcione correctamente.
Agregue este código a su texto etiqueta:
|_+_|Puede parecer contrario a la intuición, pero me saltaré los bloques iniciales de código y pasaré directamente a explicar el código desde la mitad; no te preocupes, ¡te explico todo el código!
Necesitas definir dos variables. (Aquí se explica cómo definir variables en JavaScript). Estas variables se pueden considerar como las principales variables de configuración para la presentación de diapositivas:
|_+_|Estos almacenan el número total de imágenes en la presentación de diapositivas y el número de la imagen para comenzar. Si tiene más imágenes, simplemente cambie el totalImages variable al número total de imágenes que tiene.
Las dos funciones aumentarImagen y disminuciónImagen avanzar o retroceder el imagen actual variable. ¿Debería esta variable bajar por debajo de uno o por encima de totalImages , se restablece a uno o totalImages . Esto asegura que la presentación de diapositivas se repetirá una vez que llegue al final.
De vuelta al código al principio. Este código 'apunta' a los botones siguiente y anterior. Cuando hace clic en cada botón, llama al apropiado incrementar o disminución métodos. Una vez completada, simplemente se desvanece la imagen en la pantalla y se desvanece en la nueva imagen (según lo definido por el imagen actual variable).
los parada() El método está integrado en jQuery. Esto cancela cualquier evento pendiente. Esto asegura que cada pulsación de botón sea suave, y significa que no tienes 100 pulsaciones de botones esperando para ejecutarse si te vuelves un poco loco con el mouse. los desvanecimiento (1) y desvanecerse (1) Los métodos hacen que aparezcan o desaparezcan las imágenes según sea necesario. El número especifica la duración del desvanecimiento en milisegundos. Intente cambiar esto a un número mayor, como 500. Un número mayor da como resultado un tiempo de transición más largo. Sin embargo, si va demasiado lejos, es posible que comience a ver eventos extraños o 'parpadeos' entre los cambios de imagen. Aquí está la presentación de diapositivas en acción:
Avance automático
Esta presentación de diapositivas se ve bastante bien ahora, pero se necesita un último toque final. El avance automático es una característica que realmente hará brillar esta presentación de diapositivas. Después de un período de tiempo establecido, cada imagen avanzará automáticamente a la siguiente. Sin embargo, el usuario aún puede navegar hacia adelante o hacia atrás.
el mejor lugar para comprar camisas en línea
Este es un trabajo fácil con jQuery. Es necesario crear un temporizador para ejecutar su código cada X segundos. Sin embargo, en lugar de escribir código nuevo, lo más fácil es emular un 'clic' en el botón de la siguiente imagen y dejar que el código existente haga todo el trabajo.
Aquí está el nuevo JavaScript que necesita: agréguelo después del disminuciónImagen función:
|_+_|No pasa mucho aquí. los window.setInterval El método ejecutará un fragmento de código con regularidad, según lo definido por el tiempo especificado al final. El tiempo 2500 (en milisegundos) significa que esta presentación de diapositivas avanzará cada 2,5 segundos. Un número menor significa que cada imagen avanzará a un ritmo más rápido. los hacer clic El método activa los botones para ejecutar el código como si un usuario hubiera hecho clic en el botón con el mouse.
Si está listo para su próximo desafío de JavaScript, intente construir un sitio web con un creador de sitios web estático como GatsbyJS, o un marco de front-end como Vue. Si eres un aprendiz de Ruby, Jekyll también es una opción. Así es como Jekyll y GatsbyJS se enfrentan entre sí.
Crédito de la imagen: Tharanat Sardsri a través de Shutterstock.com
Cuota Cuota Pío Correo electrónico Los 8 mejores sitios web para descargar audiolibros gratisLos audiolibros son una gran fuente de entretenimiento y mucho más fáciles de digerir. Aquí están los ocho mejores sitios web donde puede descargarlos gratis.
Leer siguiente Temas relacionados- Programación
- JavaScript
- Web Design
Joe es licenciado en Ciencias de la Computación por la Universidad de Lincoln, Reino Unido. Es un desarrollador de software profesional, y cuando no está volando drones o escribiendo música, a menudo se le puede encontrar tomando fotos o produciendo videos.
Más de Joe CoburnSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse