TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear una presentación de diapositivas con JavaScript?

46

Ya sea que esté utilizando un creador de sitios web o un sistema de administración de contenido, es muy fácil crear una presentación de diapositivas para su sitio. Por ejemplo, WordPress tiene cientos de complementos de presentación de diapositivas y galería para crear controles deslizantes impresionantes en minutos. Del mismo modo, los creadores de sitios como Weebly ofrecen un elemento de presentación de diapositivas e incluso un marco como Bootstrap ofrece un elemento de carrusel. Sin embargo, cuando crea un sitio HTML simple y estático, no hay más opciones que insertar su propio código de presentación de diapositivas personalizado. Si está buscando un bloque de presentación de diapositivas independiente, aquí hay un código de presentación de diapositivas completo con JavaScript.

¿Por qué utilizar la presentación de diapositivas?

Agregar una presentación de diapositivas en su sitio ayuda en lo siguiente:

  • Se ve elegante en su página web.
  • Agregar una presentación de diapositivas en una página de destino atraerá a los usuarios.
  • Puede mostrar algunas páginas importantes de su sitio en las diapositivas y dirigir el tráfico a esas páginas.

Presentación de diapositivas de JavaScript

Aunque hay muchos complementos disponibles para crear una presentación de diapositivas ya preparada, aquí está el código fuente para crear una presentación de diapositivas simple usando JavaScript. Puede seguir el proceso de dos pasos a continuación para agregar esta presentación de diapositivas a su sitio web.

1 guión para presentación de diapositivas

Copie y pegue el siguiente script en la sección de pie de página de su página web para insertar la presentación de diapositivas. Puede pegar el código después de la sección del cuerpo de su página web para evitar el bloqueo de recursos de procesamiento en Google PageSpeed y mejorar la velocidad de carga de la página.

<script type="text/javascript"> // Set slideshow speed in milliseconds var slideShowSpeed = 3500; // Set duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // Just add as many as images as you want one by one // Replace the images with your own site images Pic[0] = 'Image1 URL Here' Pic[1] = 'Image2 URL Here' Pic[2] = 'Image3 URL Here' Pic[3] = 'Image4 URL Here' // do not edit anything below this line /*********************************************** * Get more website widget codes @ https://www.webnots.com/demos/ ***********************************************/ var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --> </script>

2 HTML para presentación de diapositivas

El siguiente paso es copiar y pegar el siguiente código HTML en la sección de su página. Puede pegar este código cuando desee que aparezca la presentación de diapositivas.

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="" name='SlideShow' width=476 height=301> </td> </tr> </table> <script type="text/javascript"> runSlideShow(); </script>

 Opciones de personalización para la presentación de diapositivas

Puede personalizar la apariencia de la presentación de diapositivas de JavaScript utilizando las siguientes opciones.

  • Reemplace las imágenes en el script con las imágenes de su sitio ganado.
  • Agregue más imágenes continuando la matriz como Pic [0], Pic [1], Pic [2], etc.
  • Ajuste la altura y el ancho de su presentación de diapositivas en el código HTML colocado en el.
  • Cambie el borde de la tabla, el relleno de celdas y los atributos de espacio de celdas para agregar un borde a su presentación de diapositivas.
  • Puede ajustar la presentación de diapositivas y la duración del desvanecimiento en milisegundos según sus necesidades.

¿Cómo se ve?

La presentación de diapositivas se verá a continuación y recomendamos usar imágenes de ancho completo para su diseño para que se vea hermoso.

¿Cómo crear una presentación de diapositivas con JavaScript?

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More