Cómo construir una presentación de diapositivas de JavaScript en 3 sencillos pasos

Si ha leído nuestra guía sobre cómo hacer un sitio web Cómo hacer un sitio web: para principiantes Cómo hacer un sitio web: Para principiantes Hoy lo guiaré a través del proceso de creación de un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré en cada paso del camino. Lea más, puede que se esté preguntando qué hacer a continuación para mejorar sus habilidades. Hacer una presentación de fotos es una tarea sorprendentemente fácil, y una que puede enseñarle las valiosas habilidades necesarias para obtener un trabajo de programación. 10 Trabajos de programación de computadoras que están en demanda ahora. 10 Trabajos de programación de computadoras que están en demanda en este momento. Sea duro en el panorama actual, considere enfocarse en una de las siguientes concentraciones para mejorar sus posibilidades de éxito. Lee mas .

Hoy les mostraré cómo construir una presentación de diapositivas de JavaScript desde cero. Saltemos a la derecha en!

Prerrequisitos

Necesitará saber algunas cosas antes de comenzar a codificar. Junto con el navegador web y el editor de texto que prefiera (recomiendo Sublime Text), necesitará algo de experiencia con HTML, CSS, JavaScript, y jQuery.

Si no confía tanto en sus habilidades, asegúrese de leer nuestras guías sobre el uso del Modelo de objetos de documento JavaScript y el Desarrollo web: Uso del Modelo de objetos de documento. JavaScript y el Desarrollo web: Uso del Modelo de objetos del documento. Este artículo lo presentará a Esqueleto de documento con el que funciona JavaScript. Al tener un conocimiento práctico de este modelo de objeto de documento abstracto, puede escribir JavaScript que funcione en cualquier página web. Lea más y 5 pasos de bebé para aprender CSS 5 pasos de bebé para aprender CSS y convertirse en un brujo de CSS Bricolaje 5 pasos pequeños para aprender de CSS y convertirse en un brujo de CSS CSS CSS es el cambio más importante que las páginas web han visto en la última Década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más. Si tiene confianza en JavaScript pero nunca ha usado jQuery, consulte nuestra guía básica de jQuery. Una guía básica de JQuery para programadores de Javascript. Una guía básica de JQuery para programadores de Javascript. Si usted es un programador de Javascript, esta guía de JQuery Ayudarte a comenzar a codificar como un ninja. Lee mas .

1. Empezando

Esta presentación requiere varias características:

1. Soporte para imagenes
2. Controles para cambiar imágenes
3. Una leyenda de texto
4. 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 bosquejo en bruto que hice antes de escribir cualquier código:

Si se está preguntando por qué molestarse en planificar, entonces eche un vistazo a estos peores errores de programación en la historia. Los 10 peores errores de programación de la historia. Los 10 peores errores de programación de la historia. En su pasado histórico, la codificación de la destrucción forjada también. Las instancias de un poco de código malo causaron un desastre en un nivel importante. Los siguientes son 10 de los peores errores de programación en la historia. Lee mas . Este proyecto no matará a nadie, 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 bosquejo aproximado.

Aquí está el HTML inicial que necesita para comenzar. Guarde esto en un archivo con un nombre apropiado, como index.html:

         
 
  
 Molino 
 
 
  
 Planta 
 
 
  
 Perro 
 
 
❮
 
❯
 
  

Así es como se ve el código:

Es un poco de basura no es así? Vamos a descomponerlo antes de mejorarlo..

Este codigo contiene “estándar” HTML, cabeza, estilo, guión, y cuerpo etiquetas Estas piezas son componentes esenciales de cualquier sitio web.. JQuery se incluye a través de la CDN de Google - nada especial o especial hasta ahora.

Dentro del cuerpo hay un div con un id de showContainer. Este es un contenedor 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 utiliza 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 consiste en los caracteres soy_ y un numero. 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 la subtítulo clase:

 
 Perro 

He creado mis imágenes con nombres de archivos numéricos y las he guardado en una carpeta llamada Imágenes. Puede llamar al suyo como desee, siempre que actualice el HTML para que coincida.

Si desea tener más o menos imágenes en su presentación, simplemente copie y pegue o elimine los bloques de código con la imageContainer clase, recordando actualizar los nombres de los archivos y las identificaciones según sea necesario.

Finalmente, se crean los botones de navegación. Estas permiten al usuario navegar a través de las imágenes:

❮
 
❯

Estas Entidad HTML los códigos se usan para mostrar las flechas hacia adelante y hacia atrás, de manera similar a cómo funcionan las fuentes de iconos. Las fuentes de iconos son impresionantes para su sitio: He aquí por qué las fuentes de iconos son impresionantes para su sitio: Aquí es por qué hoy le mostraré qué son las fuentes de iconos y cómo puedes usarlos para animar tu sitio web. Lee mas .

2. El CSS

Ahora que la estructura central está en su lugar, es hora de que se vea bonita. Así es como se verá después de este nuevo código:

Agrega este CSS entre tu estilo etiquetas:

html font-family: helvetica, arial;  #showContainer / * Envoltura principal para todas las imágenes * / width: 670px; relleno: 0; margen: 0 auto; desbordamiento: oculto; posición: relativa;  .navButton / * Hace que los botones se vean bien * / cursor: puntero; flotador izquierdo; ancho: 25px; altura: 22px; relleno: 10px; margen derecho: 5px; desbordamiento: oculto; text-align: center; color blanco; font-weight: negrita; tamaño de fuente: 18px; fondo: # 000000; opacidad: 0,65; selección de usuario: ninguna;  .navButton: hover opacity: 1;  .caption float: derecha;  .imageContainer: not (: first-child) / * Ocultar todas las imágenes excepto la primera * / display: none; 

Eso se ve mucho mejor ahora, ¿verdad? Echemos un vistazo al código..

Estoy usando imágenes de muestra de nuestra Panasonic G80 / G85 Panasonic Lumix DMC-G80 / G85 Revisión Panasonic Lumix DMC-G80 / G85 Revisión La Lumix G85 es la cámara sin espejo más reciente de Panasonic, y tiene un gran impacto en el departamento de video, con HDMI y grabación en 4K - ¡todo por $ 1000! Leer más reseña. Estas imagenes son todas 670 x 503 píxeles, por lo que esta presentación de diapositivas se ha diseñado principalmente para imágenes de ese tamaño. Deberá ajustar el CSS de forma adecuada si desea utilizar imágenes de un tamaño diferente. Te recomiendo que cambies el tamaño de tus imágenes para que coincidan con los tamaños: diferentes imágenes de diferentes dimensiones causarán problemas de estilo.

Más De este CSS se explica por sí mismo. Hay un código para definir el tamaño del contenedor para almacenar las imágenes, alinearlo todo en el centro, especificar la fuente, junto con el botón y el color del texto. Hay algunos estilos que quizás no hayas encontrado antes:

1. cursor: puntero - Esto cambia el cursor de una flecha a un dedo que apunta cuando mueve el cursor sobre los botones.
2. opacidad: 0.65 - Esto aumenta la transparencia de los botones..
3. selección de usuario: ninguna - Esto asegura que no pueda resaltar accidentalmente el texto en los botones.

Puedes ver el resultado de la mayoría de este código en los botones:

La parte más compleja aquí es esta línea de aspecto extraño:

.imageContainer: not (: first-child) 

Puede parecer bastante inusual, sin embargo es bastante autoexplicativo.

En primer lugar, se dirige a cualquier elemento con el imageContainer clase. los :no() La sintaxis indica que cualquier elemento dentro de los corchetes debe ser excluido de este estilo. Finalmente, el :primer hijo la sintaxis indica que este CSS debe apuntar a cualquier elemento que coincida con el nombre pero ignorar 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 aparte de la primera..

3. El JavaScript

La pieza final del rompecabezas es el JavaScript. Esta es la lógica para hacer que la presentación de diapositivas funcione correctamente..

Agregue este código a su guión etiqueta:

$ (documento) .ready (función () $ ('# anterior'). en ('clic', función () // Cambiar a la imagen anterior $ ('# im_' + currentImage) .stop (). fadeOut (1); disminuirImage (); $ ('# im_' + currentImage) .stop (). fadeIn (1);); $ ('# next'). on ('click', function () / / Cambiar a la siguiente imagen $ ('# im_' + currentImage) .stop (). FadeOut (1); IncreaseImage (); $ ('# im_' + currentImage) .stop (). FadeIn (1);) ; var currentImage = 1; var totalImages = 3; function IncreaseImage () / * Incrementa currentImage en 1. * Se reinicia en 1 si es mayor que en totalImages * / ++ currentImage; if (currentImage> totalImages) currentImage = 1; la función disminuyeImagen () / * reduce la imagen actual en 1. * Se restablece a imágenes totales si es menor que 1 * / --currentImage; if (currentImage < 1)  currentImage = totalImages;   );

Puede parecer contrario a la intuición, pero voy a omitir los bloques de código iniciales y saltaré directamente a explicar el código a la mitad. No se preocupe, le explico todo el código.!

Necesitas definir dos variables. Estas pueden considerarse como las principales variables de configuración para la presentación de diapositivas:

var currentImage = 1; var totalImages = 3;

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 tienes más imágenes, simplemente cambia la Imágenes totales variable al número total de imágenes que tienes.

Las dos funciones aumentarImagen y disminuirimagen avanzar o retroceder el imagen actual variable. ¿Debería esta variable ir más bajo que uno, o más alto que Imágenes totales, se restablece a uno o Imágenes totales. Esto asegura que la presentación de diapositivas se repetirá una vez que llegue al final.

Volver al código al principio. Este codigo “objetivos” Los botones siguientes y anteriores. Al hacer clic en cada botón, se llama la correspondiente incrementar o disminución metodos Una vez completado, simplemente desvanece la imagen en la pantalla y se desvanece en la nueva imagen (como lo define el imagen actual variable).

los detener() El método está integrado en jQuery. Esto cancela cualquier evento pendiente. Esto garantiza que cada pulsación de botón sea suave, y significa que no tiene 100 pulsaciones de todas las teclas en espera de ejecutar si se vuelve un poco loco con el mouse. los fadein (1) y desvanecimiento (1) Los métodos se desvanecen dentro o fuera de las imágenes según sea necesario. El número especifica la duración del fundido en milisegundos. Intente cambiar esto a un número más grande como 500. Un número más grande da como resultado un tiempo de transición más largo. Sin embargo, vaya demasiado lejos y puede comenzar a ver eventos extraños o “parpadeos” entre los cambios de imagen. Aquí está la presentación de diapositivas en acción:

Avance automatico

Esta presentación se ve bastante bien ahora, pero se necesita un último toque final. El avance automático es una característica que realmente hará que esta presentación brille. Después de un período de tiempo establecido, cada imagen avanzará automáticamente a la siguiente. El usuario todavía puede navegar hacia adelante o hacia atrás, sin embargo.

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 un nuevo código, lo más fácil es emular un “hacer clic” en el siguiente botón de imagen, y deje que el código existente haga todo el trabajo.

Aquí está el nuevo JavaScript que necesita - agregue esto después de disminuirimagen función:

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

No hay mucho que hacer aquí. los window.setInterval El método ejecutará una parte del código regularmente, según lo define el tiempo especificado al final. El tiempo 2500 (en milisegundos) significa que esta presentación avanzará cada 2.5 segundos. Un número más pequeño 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 su mouse.

¿Aprendiste algunas habilidades nuevas hoy? ¿Cuál es tu truco favorito para animar presentaciones de diapositivas? Háganos saber en los comentarios a continuación.!

Crédito de la imagen: Tharanat Sardsri a través de Shutterstock.com

Explorar más sobre: ​​JavaScript, diseño web.