¿Quieres crear una presentación de diapositivas atractiva y fácil de usar pero no sabes cómo? En este artículo te mostraremos cómo crear una presentación de diapositivas simple utilizando JavaScript. ¡No necesitas ser un experto en programación para hacerlo! Con sólo un poco de conocimiento en esta herramienta de programación, podrás sorprender a tus audiencias con una presentación de diapositivas única y profesional. ¡Sigue leyendo para descubrir cómo hacerlo!
Las presentaciones de diapositivas son bastante comunes en los sitios que tienen muchas imágenes que deben mostrarse a los visitantes. Usando simplemente JavaScript, puedes crear una presentación de diapositivas muy simple utilizando sólo unas pocas líneas de código. En este tutorial, repasaremos un ejemplo de presentación de diapositivas simple creado con JavaScript.
Siéntase libre de usar el código de ejemplo que se muestra a continuación y desarrollarlo para que pueda agregar componentes más sofisticados para su diapositivas. Con el siguiente ejemplo, puede controlar cuántas imágenes se incluyen en la presentación y la duración de cada diapositiva.
el html
El solo El código HTML necesario es un simple <div> que contiene uno <img /> (imagen) elemento. Asegúrese de asignar un id al elemento de la imagen. Aquí hay un ejemplo…
<div>
<img id="image1" />
</div>el css
No se requiere ningún código CSS para que esta presentación de diapositivas funcione. Sin embargo, si usted me gustaría agregar estilos adicionales a la <div> elemento y/o elemento de imagen, podría hacerlo.
el JavaScript
Como puede ver en el siguiente ejemplo, No hay mucho Código JavaScript necesario para este ejemplo. Las primeras líneas se utilizan para configurar nuestras variables. imgArray es una matriz utilizada para mantener toda la información de origen de la imagen.
El curIndex variable se utiliza para seguir la pista de la imagen actual que se muestra en nuestro programa. imgDuration se utiliza para establecer el cantidad de tiempo (en milisegundos) la imagen se mostrará antes de mostrar la siguiente imagen.
La función llamada slideShow() es donde ocurre la magia. Solo hay unas pocas líneas de código. La primera línea se utiliza para asignar el elemento de imagen. una nueva fuente de imagen. como el curIndex cambios variables, el elemento de imagen mostrará una imagen diferente.
Después se asigna la fuente de la imagen, el curIndex variable se incrementa en uno. Una vez el curIndex variable es igual al número total de imágenes en nuestra matriz, a la variable se le asigna un valor de 0 para que la primera imagen se muestre una vez más. La última línea de la función crea una especie de bucle para nuestra función. Aquí está el código JavaScript…
<script>
var imgArray = [
'images/image1.jpg',
'images/image2.jpg',
'images/image3.jpg'
];
var curIndex = 0;
var imgDuration = 5000;
function slideShow() {
document.getElementById('image1').src = imgArray[curIndex];
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout("slideShow()", imgDuration);
}
slideShow();
</script>Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Slideshow Demo</title>
</head>
<body>
<div>
<img id="image1" />
</div>
<script>
var imgArray = [
'images/image1.jpg',
'images/image2.jpg',
'images/image3.jpg'
];
var curIndex = 0;
var imgDuration = 5000;
function slideShow() {
document.getElementById('image1').src = imgArray[curIndex];
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout("slideShow()", imgDuration);
}
slideShow();
</script>
</body>
</html>