El uso de jQuery
Los frameworks de JavaScript son una alternativa a todos estos métodos
tradicionales y jQuerys uno de los
principales. Caracterizado por su sencillo uso y codificación hemos
decidido utilizarlo para presentar esta serie de artículos donde explicaremos
métodos sencillos, eficientes y estéticos para desplegar en nuestras imágenes
de manera original.
En esta ocasión crearemos un efecto para que
una serie de imágenes se muestre de manera secuencial, es decir que cada
elemento vaya apareciendo en nuestra página de manera progresiva y siguiendo un
orden lineal horizontal.
La estructura HTML
Lo primero que debemos hacer es crear
nuestra estructura del documento HTML, donde agregaremos 8 imágenes dentro
de una lista desordenada y dos links que llevaran por id “mostrar” y “ocultar”,
conteniendo el mismo texto.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejo Secuencial
de Imagenes</title>
</head>
<body>
<a href="#" id="mostrar">Mostrar</a> / <a href="#" id="ocultar">Ocultar</a>
<ul>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
</ul>
</body>
</html>
|
