Cómo hacer una presentación de diapositivas Javascript

Una presentación de diapositivas JavaScript es un grupo de códigos en HTML / JavaScript que permite al usuario hacer clic en "Atrás" y "Siguiente", mientras que "voltear" a través de un conjunto de imágenes digitales. Una vez que conozca la sintaxis, es relativamente fácil crear una presentación de diapositivas JavaScript.

Instrucciones

1 Mira una presentación de diapositivas muestra de JavaScript. Ver la sección Recursos más abajo para enlazar a una presentación de diapositivas en Internet.

2 Iniciar un documento en blanco en el Bloc de notas o su editor HTML elegido. Marcar el documento con las etiquetas HTML básicas de la siguiente manera. Se puede introducir cualquier texto en el campo de título; esta etiqueta aparece en la barra de título azul en la parte superior del navegador web.

3 Configurar su presentación de diapositivas JavaScript utilizando el código de abajo. ImageGroup es el nombre de una nueva matriz, o conjunto, de las imágenes. Se puede elegir cualquier nombre, no sólo ImageGroup-que simplemente debe mantener el nombre de la matriz consistente. La palabra "matriz" es una palabra clave JavaScript y no se puede cambiar; asegúrese de sacar provecho de la "A" El número al lado de la palabra "Matriz" entre paréntesis es el número total de imágenes de la presentación. Esta presentación tiene dos imágenes, pero el suyo puede tener tantas imágenes como desee.

imageGroup = new Array(2);

4 Asignar una imagen a cada valor de índice de la matriz. En el código siguiente, la imagen en la posición cero es ImageGroup [0]. Debe informar a JavaScript que el objeto en la posición cero es una imagen, por lo tanto, el código "nueva imagen". Tenga en cuenta que "imagen" es una palabra clave y debe estar en mayúsculas. La siguiente línea de código JavaScript, que le dice a la imagen desde su ordenador a tirar en el objeto de imagen posición cero. En este caso, el nombre de la imagen es "ketchikan.jpg." Observe que los nombres de los archivos son siempre entre mayúsculas y minúsculas.

imageGroup[0] = new Image;
imageGroup[0].src = "ketchikan.jpg";
imageGroup[1] = new Image;
imageGroup[1].src = "lumberjackketchikan.jpg";

5 Escriba el código de abajo. El "índice = 0;" código significa que la presentación de diapositivas debe comenzar por el principio de la matriz. El código "función Doback ()" dice JavaScript qué hacer cuando el usuario hace clic en "Volver" para ver las imágenes anteriores. El código "función doNext ()" dice JavaScript cómo comportarse cuando el usuario desea ver la imagen siguiente en la presentación de diapositivas. El código "document.slideshow.src" significa que el documento actual en la pantalla (navegador web) está utilizando el objeto denominado de "presentación" (el contenedor para su presentación de diapositivas de fotos digitales) para que este poco de trabajo de código JavaScript.

index = 0;
function doBack()
{
if (index > 0)
{
index --;
document.slideshow.src =
imageGroup[index].src;

}
regreso;
}
funcionar doNext ()
{
si (índice <4)
{
índice ++;
document.slideshow.src =
ImageGroup [índice] .src;

}
regreso;
}

6 Introducir el resto de estos códigos HTML básicos en su documento. Inserte una etiqueta de imagen para crear el punto donde su primera imagen debe mostrar. Observe el nombre de "presentación" es el mismo nombre en código "document.slideshow.src" anterior. Establecer la altura y la anchura atributos si el deseo de hacer que todas las imágenes de la presentación del mismo tamaño.

name = "presentación"
width = 430
height = 300>

7 Crear hipervínculos para las palabras "Siguiente" y "Atrás" en la cual el usuario puede hacer clic. Cuando el usuario hace clic en cualquiera de estas palabras, la acción de hacer clic se llama la "funciones" (que Doback configuradas anteriormente) en acción "doNext" y. Guardar el documento como "filename.html" (sin las citas; crear su propio nombre de archivo). Una vista previa en un navegador web para ver el producto final.
Espalda
Siguiente