<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fotos1.aspx.cs" Inherits="WebApplication2.fotos1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Manejo Secuencial de Imagenes</title> <style> li { float: left; list-style: none; margin: 0 25px 25px 0; display: none; } </style> </head> <body> <a href="#" id="mostrar">Mostrar</a> / <a href="#" id="ocultar">Ocultar</a> <ul> <li><img src="../img/foto1.jpg"></li> <li><img src="../img/foto2.jpg"></li> <li><img src="../img/foto3.jpg"></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script> <script> $(document).ready(function() { var lista = $('li').hide(); $('#mostrar').click(function() { var i = 0; (function mostrarimg() { lista.eq(i++).fadeIn(400, mostrarimg); })(); }); $('#ocultar').click(function() { var i = $('li').size(); (function ocultarimg() { lista.eq(--i).fadeOut(200, ocultarimg); })(); }); }); </script> </body> </html>