Buscar en Mundobip

Artículos | Foro

Iniciación a HTML y jQuery

Todo sobre lenguajes de programación, IDEs, lenguajes de bases de datos, HTML, etc.

Re: Iniciación a HTML y jQuery

Notapor Xtreme » 10 Jul 2010 20:49

Ahora me pongo manos a la obra con ello, echale un vistazo a tus mensajes privados anda :P

Edito: Le he pegado un buen vistazo a esto, no veo el error que he podido cometer por ninguna parte, a ver si me pudieras ayudar...

Código: Seleccionar todo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                 
<head>
<title></title>
<meta name="description" content="Animación en jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="show1">Mostrar</button>
<button id="hide1">Esconder</button>
<img id="foto" name="fuente" style="display: none" class='imagen' src="wall1.jpg"/>


<script type="text/javascript">
 
   NombresImg = new Array("wall1.jpg","wall2.jpg","wall3.jpg");
   var i = 0;
 
 function MostrarImg() {

   if (i<=NombresImg.length-1){
      fuente.src = NombresImg[i];
      $('#show1').click(function() {
         $("#foto").show(500, function() {
            $('#foto').hide(2500)})
         })
      }
   else {
      i=0;
      fuente.src=NombresImg[i];
      $('#show1').click(function() {
         $("#foto").show(500, function() {
            $('#foto').hide(2500)})
         })
      }
   i++;
   setTimeout('MostrarImg()',3000);
   }
   
   
   MostrarImg();
   
   $('#hide1').click(function () {
      $('.imagen').hide();
    });
   


</script>

</body>                                                                 
</html>




Publicidad
  Sobremesa jugón
  • Procesador
    Intel Core 2 Q8200 @2.8
  • Placa base
    Asus Maximus Formula
  • RAM
    2x2gb Samsung Drr2 667@800
  • Tarjeta gráfica
    AMD 6870 xfx OC
  • Disco Duro
  • Unidad Óptica
  • Refrigeración
    Thermaltake isgc 300
  • Fuente alimentación
  • Caja
    Nox coolbay W
  • Sonido
    Creative soundblaster
  • Sistema operativo
    Windows 7 Ultimate
  • Monitor
  • Teclado
  • Ratón
    Logitech g400
  • Otros
  • Otros
Ocultar
Avatar de Usuario
Xtreme
 
Mensajes: 1023
Registrado: 13 Dic 2009 23:47

Re: Iniciación a HTML y jQuery

Notapor ari0k0 » 11 Jul 2010 15:24

Buenas Xtreme, creo que el problema que tienes viene por:

Código: Seleccionar todo
   fuente.src = NombresImg[i];


cuando fuente es el "name" de la <img>.. si quieres que te funcione correctamente, accedería con:

Código: Seleccionar todo
   $("#foto").attr("src",NombresImg[i]);


Con lo que cogemos el elemento con id = foto, y en su atributo "src", le ponemos el nombre que toque. Con esto vemos otra funcionalidad de jQuery, poder acceder a los atributos de los elementos y cambiarlas. Para cambiar un atributo, basta con seleccionar el elemento con jQuery (por su id o class) y luego ".attr('atributo','valor_a_poner');"

El código, haciendo un poco de limpieza y simplificando, propondría este:

Código: Seleccionar todo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<html>                                                                 
<head>
<title></title>
<meta name="description" content="Animación en jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<!-- agregamos la foto -->
<img id="foto"src="wall0.jpg"/>

<script type="text/javascript">
   NombresImg = new Array("wall0.jpg","wall1.jpg","wall2.jpg"); // Añadimos todas las fotos que queramos.
   var i = 0;
   function MostrarImg() {
      // Fundido fuera de la imagen...
      $("#foto").fadeOut('slow', function () {
         // Cuando acaba el fundido, ponemos el src de la siguiente imagen...
         $("#foto").attr("src",NombresImg[i]);
         // Fundido mostrando la nueva imagen...
         $("#foto").fadeIn('slow');
      });
      i = (i + 1) % NombresImg.length; // Calculamos el próximo i = 0,1,2...
      setTimeout('MostrarImg()',5000); // Refrescamos
   }
   
   MostrarImg();
</script>

</body>                                                                 
</html>


Y ya puestos y comentando el código, aquí utilizo una función de jQuery interesante, que da un efecto muy chulo, el fadeIn (fundido apareciendo) y el fadeOut (fundido ocultando), similares a el hide y el show, pero con un efecto fundido que suele quedar estupendo.

Con estas pocas líneas tenemos un bonito SlideShow con jQuery sin necesidad de Flash :)
Avatar de Usuario
ari0k0
 
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)

Re: Iniciación a HTML y jQuery

Notapor Xtreme » 11 Jul 2010 18:26

Suponía que andaría por el asunto de cambiar la src, pero no sabía el motivo exacto :P

Lo único que veo es que no has metido un if por si acaso el i se sale del rango de la array, pero supongo que lo has quitado porque simplemente es un ejemplo

Muchas gracias por todo, aunque no lo creas estoy aprendiendo bastante ;)
  Sobremesa jugón
  • Procesador
    Intel Core 2 Q8200 @2.8
  • Placa base
    Asus Maximus Formula
  • RAM
    2x2gb Samsung Drr2 667@800
  • Tarjeta gráfica
    AMD 6870 xfx OC
  • Disco Duro
  • Unidad Óptica
  • Refrigeración
    Thermaltake isgc 300
  • Fuente alimentación
  • Caja
    Nox coolbay W
  • Sonido
    Creative soundblaster
  • Sistema operativo
    Windows 7 Ultimate
  • Monitor
  • Teclado
  • Ratón
    Logitech g400
  • Otros
  • Otros
Ocultar
Avatar de Usuario
Xtreme
 
Mensajes: 1023
Registrado: 13 Dic 2009 23:47

Re: Iniciación a HTML y jQuery

Notapor ari0k0 » 11 Jul 2010 18:41

El "if" para que el indice no se salga de rango, con el código que he puesto, no es necesario, verás, el truco está aquí:

Código: Seleccionar todo
 
    i = (i + 1) % NombresImg.length;


con esta operación aritmética, conseguimos incrementar el índice y luego le aplicamos el módulo (en javascript es %) con el tamaño del array. La operación aritmética del módulo, te retorna el resto de la división, si queremos que el íncide sea un número que esté entre el 0 y el 2 (0,1,2) haríamos un módulo 3... así se verá más claro:

0 módulo 3 = 0 dividido 3 = 0 + resto 0
1 módulo 3 = 1 dividido 3 = 0 + resto 1
2 módulo 3 = 2 dividido 3 = 0 + resto 2
3 módulo 3 = 3 dividido 3 = 1 + resto 0
4 módulo 3 = 4 dividido 3 = 1 + resto 1
5 módulo 3 = 5 dividido 3 = 1 + resto 2
...
15 módulo 3 = 15 dividido 3 = 5 + resto 0
16 módulo 3 = 16 dividido 3 = 5 + resto 1
...

Si te fijas, el resto siempre está entre el 0,1,2... puedes ir incrementando el índice todo lo que quieras, que siempre si le aplicas un módulo 3, el resto estará entre [0,2]

Por lo tanto con una simple línea, conseguimos que el índice, vaya incrementándose y siempre entre el 0,1,2...
Avatar de Usuario
ari0k0
 
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)

Re: Iniciación a HTML y jQuery

Notapor Xtreme » 11 Jul 2010 18:50

Ah vale vale, lo pillo

¿A por que vamos ahora? :P
  Sobremesa jugón
  • Procesador
    Intel Core 2 Q8200 @2.8
  • Placa base
    Asus Maximus Formula
  • RAM
    2x2gb Samsung Drr2 667@800
  • Tarjeta gráfica
    AMD 6870 xfx OC
  • Disco Duro
  • Unidad Óptica
  • Refrigeración
    Thermaltake isgc 300
  • Fuente alimentación
  • Caja
    Nox coolbay W
  • Sonido
    Creative soundblaster
  • Sistema operativo
    Windows 7 Ultimate
  • Monitor
  • Teclado
  • Ratón
    Logitech g400
  • Otros
  • Otros
Ocultar
Avatar de Usuario
Xtreme
 
Mensajes: 1023
Registrado: 13 Dic 2009 23:47

Re: Iniciación a HTML y jQuery

Notapor ari0k0 » 11 Jul 2010 19:00

Reto 6: Crear una tabla dinámica
Una de las cosas importantes que tiene javacript, jquery y trabajar con el árbol DOM, es que puedes cambiar cosas en "caliente"... pero no solo cambiar, se puede añadir elementos nuevos y se pueden eliminar. Para añadir cosas nuevas con jQuery, se utiliza los comantos .append (añadir al final) o .html (añadir substituyendo lo que tenga) y claro está, borrar elementos con .remove.

El reto 6, podría ser, como crear una tabla dinámica, inicialmente vacía. Al clickear un botón, que añada una nueva fila (con un botón de eliminar) y al seleccionar ese botón de eliminar, elimine esa fila en concreto.

Podría quedar algo así (ver adjunto)
Adjuntos
reto06.jpg
reto06.jpg (28.29 KiB) Visto 2700 veces
Avatar de Usuario
ari0k0
 
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)

Anterior

Volver a Desarrollo

¿Quién está conectado?

Usuarios registrados: Bing [Bot]

cron