Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo 

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes V

Transiciones II

Planteamiento

En esta página seguimos con el ejercicio iniciado en la página anterior. Hasta ahora hemos construido la página de forma estática. Ahora empezaremos con el código javascript para dinamizar la página.

El visor de la página consiste en unas imágenes que se irán cambiando automáticamente cada un cierto tiempo; A su vez cuando se cambia de una imagen a otra, las imágenes se mueven o cambian de aspecto, de manera que se necesita un cierto tiempo para el cambio. Necesitaremos por tanto dos temporizadores o instrucciones setInterval() distintos para manejar la página. Cada uno de ellos tendrá su función. A la vez dentro de estas funciones debemos distinguir el tipo de transición en curso para aplicar instrucciones distintas.

Sin embargo lo primero que debemos hacer en el código javascript es localizar en el DOM los elementos que vamos a utilizar, y definir las variables o elementos que vamos a utilizar en la página.


Elementos iniciales

Al iniciar la página definiremos en javascript una serie de elementos y variables que nos serán útiles más adelante. Empezamos el código javascript definiendo un array con los pies de foto, y algunas variables:

//Datos de imágenes: pies de foto
titulos=['1. India - Agra - El Taj Majal.',
         '2. Albania - Region de Ballsh.',
         '3. Atenas- Partenón.',
         '4. Bélgica - Amberes.',
         '5. Costa Rica - Parque nacional de la Amistad.',
         '6. Egipto - Templo de Abu Simbel.',
         '7. España - Albacete ciudad.',
         '8. España - Tarragona - Acueducto romano.'];
numTitulo=-1; //Referencia al pie de foto.
numImagen=0; //Referencia a la imagen.
modo="0"; //referencia al modo de transición.

El array titulos contiene los pies de foto de las imágenes. Las variables numTitulo y numImagen son las que indican qué pie de foto e imagen debe verse. La variable modo indica el tipo de transición entre imágenes.

Además de estas variables iniciales debemos tener localizados los elementos del DOM que son variables en la página. para ello los definiremos mediante variables:

Continuamos el código javascript con las siguientes líneas:

window.onload = function() { //tras cargar la página ... 
//Localización de elementos en el DOM:
titEnt=document.getElementById("tituloEntrante");  // pie de foto que ponemos (entrante)
titSal=document.getElementById("tituloSaliente"); // pie de foto que quitamos (saliente)
imgEnt=document.images["fotoEntrante"]; //imagen entrante
imgSal=document.images["fotoSaliente"];  //imagen saliente
divEnt=document.getElementById("entrante"); //pantalla móvil entrante
divSal=document.getElementById("saliente"); //pantalla movil saliente
miprueba=document.getElementById('prueba'); //línea de información.

pararCambio=setInterval(cambio,8000); //iniciar visionado automático
}

Las diferentes variables nos localizan los elementos variables de la página, los cuales vienen explicados en los comentarios del código. La última línea indica que la función cambio()debe repetirse cada 8 segundos, Es esta función, la cual veremos más adelante, es la que hace el cambio automático de las imágenes.


Cambio por menú de transiciones.

Sin embargo observamos que en el código HTML, en el menú de transiciones, no llamamos a la función cambio() al pulsar una opción (atributos onclick), sino a la función activar(). Esto es porque antes de llamar a esta función debemos hacer algunos ajustes.

Cuando pulsamos en el menú para iniciar otro tipo de transición, el temporizador de cambio() está ya activado. Si volvieramos a activarlo, se iniciaría otra vez el temporizador. Habría dos temporizadores sobre la misma función, por lo que provocaría desajustes en la forma de ver la página. Lo mismo ocurre con el temporizador de la función transicion(), el cual, como veremos más adelante, controla la transición entre imágenes. Es decir, si pulsamos en el menú mientras se está produciendo una transición, iniciaríamos otra, de forma que estas se superpondrían.

Para evitar esto, lo primero que hacemos al pulsar en el menú es parar los temporizadores, para luego reiniciar el del cambio de imagen (función cambio). Como veremos más adelante, la función cambio() se ocupa más adelante de iniciar el temporizador de transición.

Los atributos onclick del menú de transiciones, además de llamar a la función activar, dan un valor a la variable modo. Esta variable es la que controlará mediante estructuras condicionales que la transición sea de uno u otro tipo. al código javascript que tenemos hasta ahora le añadiremos la función activar.

function activar() { //al pulsar en el menu ...
         clearInterval(completado) //parar temporizador de transición
         clearInterval(pararCambio) //parar temporizador cambio de imagen
         pararCambio=setInterval(cambio,8000) //iniciar temporizador cambio de imagen
         cambio() //cambiar imagen.
         }

Además de lo dicho anteriormente, la última línea de la función inicia el cambio de imagen sin esperar al temporizador. De esta manera el cambio se produce también al pulsar en el menú, sin tener que esperar los 8 segundos del temporizador.


Cambio de imagen

El cambio de imagen se realiza cada 8 segundos (o 8000 milisegundos), indicados en el temporizador. por tanto todo lo indicado en la función cambio(), incluidas las llamadas a otras funciones, se repetirá cada 8 segundos. Por tanto de esta función depende no sólo el cambio de imagen, sino que las transiciones de imágenes se realizarán también cada 8 segundos. Para ello todo el código que hagamos a partir de ahora va a depender de esta función. Aunque hagamos otras funciones o temporizadores, a estos sólo se puede acceder desde el código de esta función.

La función cambio() consta de tres partes: En la primera reiniciamos una serie de valores que tras las transiciones de imágenes pueden haber cambiado. Esto permite que la próxima transición se haga de forma correcta, aunque cambiemos el tipo de transición. En la segunda mediante una estructura switch definimos los valores iniciales para cada tipo de transición. En la tercera iniciamos el temporizador de la transición, la cual está en una función aparte y después avanzamos un número en las variables que definen la imagen y el pie de foto que deben verse.

De momento incluiremos sólo el modo="0" o "Sin transición" como tipo de transición. Más adelante, al incluir otro tipo de transiciones, ampliaremos está función. El código javascript de la página lo continuaremos de la siguiente manera:

function cambio() { //Temporizador de cambio de imagen
         //reiniciar variables
         divSal.style.left="0px"; //posición pantalla saliente
         divSal.style.top="0px";
         divEnt.style.left="0px"; //posición pantalla entrante
         divEnt.style.top="0px";
         //tipos de transición
         switch (modo) {
         case "0": //tipo Sin transición
         divSal.style.left="400px"; //posición inicial pantalla saliente.
         miprueba.innerHTML="Sin Transición."; //info tipo transición
         break;
         }
         //Transición y paso a imagen siguiente.
         completado=setInterval(transicion,50); //iniciar temporizador transición
         numImagen++; //paso a la imagen siguiente
         numTitulo++; //paso a pie de foto siguiente
         if (numImagen>8) { //reiniciar tras llegar al final.
            numImagen=1;
            numTitulo=0;	
            }
         }

En el código comentado, vemos las tres partes de la función. las dos primeras las iremos ampliando según vayamos añadiendole tipos de transiciones. Vemos también que en la estructura switch indicamos también en la "línea de información" el tipo de transición que está en marcha. Esto lo haremos también con el resto de tipos de transiciones.

En la tercera parte abrimos el temporizador de transición setInterval(transicion,50), el cual nos lleva a una función que se repite cada 50 milisegundos, es decir 20 veces por segundo. Esta velocidad es la que nos dará en las transiciones la sensación de movimiento.

En la condición de la estructura switch del modo "0" hemos posicionado la imagen saliente fuera de la pantalla, para que al hacer la transición, se vea sólo la imagen entrante.


Función de transición

La función que realiza la transición entre imágenes consiste en una estructura condicional switch en la que para cada tipo de transición tiene una condición distinta. No obstante hay un trozo de código que es común a la mayoría de tipos de transición. Es por esto que lo hemos puesto en una función aparte, la cual es llamada desde cada una de las condicionales. Este código consiste en el visionado en cada momento de las pantallas entrante y saliente, así como de los pies de foto.

Por otra parte en cada una de las condicionales se indica cuando debe pararse el movimiento de imágenes que se realiza en la transición. Ello se indica mediante una condicional if que para la transición cuando la imagen nueva ha sustituido completamente a la antigua.

En esta página veremos sólo el código para el modo="0" o "Sin transición"; por lo que más adelante ampliaremos esta función con las condicionales de los otros modos. El código javascript lo continuaremos de la siguiente manera:

function transicion() { //temporizador de transición
         switch (modo) { 
         case "0": //modo sin transición
         visionar() ; //visualizar elementos comunes
         clearInterval(completado) //parar transición
         break;
         }
         }

Vemos la primera condición de la función transición. Para ver el elemento en pantalla nos manda a una nueva función llamada visionar(). Esto lo hacemos así porque esta función es un trozo de código que se repite en casi todas las demás condiciones, de manera que llamando a esta función nos evitamos tener que repetir este trozo de código en las demás condiciones de la estructura switch.

Al acabar de realizar el código de esta función, paramos el temporizador de transición, ya que al no haber transición, basta con colocar las imágenes en la posición correcta para que se vea la siguiente.

La función visionar() es la que muestra las imágenes y los pies de foto en pantalla. ESta función se repite en cada intervalo de la transición, de manera que si cambiamos la posición de la imagen en cada intervalo, ésta se irá desplazando por la pantalla.

Colocamos la función visionar() en el código javascript a continuación del que ya tenemos:

function visionar() { //visualiza la imagen
         fotoEntra=numImagen+1; //num para foto entrante
         tituloEntra=numTitulo+1;  //num para titulo entrante
         if (fotoEntra>8) { //reiniciamos ciclo al llegar al final
            fotoEntra=1;
            tituloEntra=0;
            }
         imgEnt.src="foto"+fotoEntra+".jpg"; //mostrar imagen entrante
         imgSal.src="foto"+numImagen+".jpg"; //mostrar imagen saliente
         titEnt.innerHTML=titulos[tituloEntra]; //mostrar pie foto entrante
         titSal.innerHTML=titulos[numTitulo]; //mostrar pie foto saliente
         }

Con lo hecho hasta ahora ya podemos ver la página en la que cada ocho segundos cambia la imagen. Si pulsamos en el primer tipo de transición del menú "Sin transicion", cambia también a la imagen siguiente sin esperar los 8 segundos. La página del ejercicio, nos quedará en el navegador como en el siguiente enlace:

Transiciones - fase 2


A continuación, en el siguiente enlace mostramos el código de los archivos HTML, CSS y javascript utilizados hasta ahora en este ejercicio, por si quieres repasarlos o has tenido alguna dificultad al seguir el ejercicio.

Código de Transiciones - fase 2


Tenemos la base del código javascript para ir añadiendo otros tipos de transiciones a la página de ejercicio, tal como veremos en las siguientes páginas.



En la siguiente página seguimos con este ejercicio, ahi veremos los tipos de transiciones en los que las imágenes se desplazan en una dirección hasta cambiarse.

Transiciones III



Imágenes en prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com