Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/04/2012, 09:11
navegantes
 
Fecha de Ingreso: abril-2009
Ubicación: Barcelona
Mensajes: 113
Antigüedad: 15 años, 6 meses
Puntos: 9
Pregunta Transición de cinco imágenes.

Hola a todos.

Mi idea es la siguiente. En un array meto 20 fotos las cuales quiero mostrarlas de cinco en cinco de forma aleatoria y sin que se repitan.

Esta parte creo que la tengo resuelta de mejor o peor manera.

Mi problema ahora es que quiero que cuando cambien lo hagan con un efecto de transición tipo fade. He encontrado muchas webs con código para ello pero no me sirve porque siempre los veo referenciados a un único listado fijo. Por ejemplo un div y van mostrando las imágenes contenidas en el mismo. Pero que las imágenes vayan cambiando cada cierto tiempo de forma aleatoria y encima cinco de golpe nada.

O al menos yo no he sabido adaptarlas vaya.

El código del script para mostrar cinco imágenes de golpe de forma aleatoria es el siguiente.

Código Javascript:
Ver original
  1. <script>
  2.  
  3.     function myrand(number)
  4.     {
  5.       return Math.floor(Math.random()*number);
  6.     }
  7.    
  8.     var size = 12;
  9.     var num_chosen = 5;
  10.     var my_images = new Array(size);
  11.     my_images[0]="fot1.jpg";
  12.     my_images[1]="fot2.jpg";
  13.     my_images[2]="fot3.jpg";
  14.     my_images[3]="fot4.jpg";
  15.     my_images[4]="fot5.jpg";
  16.     my_images[5]="fot6.jpg";
  17.     my_images[6]="fot7.jpg";
  18.     my_images[7]="fot8.jpg";
  19.     my_images[8]="fot9.jpg";
  20.     my_images[9]="fot10.jpg";
  21.    //y el resto de la lista
  22.    
  23.     function showimg()
  24.     {
  25.         for (i = 0; i < num_chosen; ++i)
  26.         {
  27.         choice = myrand( size - i ) + i;
  28.         temp = my_images[choice];
  29.         my_images[choice] = my_images[i];
  30.         my_images[i] = temp;
  31.         }
  32.    
  33.         for (i = 0; i < num_chosen; ++i)
  34.         {
  35.         document.getElementById('foto'+[i]).src = 'img/img_ciclos/'+ my_images[i] +'';
  36.         }
  37.     }
  38.    
  39. </script>

Y en el html

Código HTML:
Ver original
  1. <div class="pics">
  2.     <img id="foto0" />
  3.     <img id="foto1" />
  4.     <img id="foto2" />
  5.     <img id="foto3" />
  6.     <img id="foto4" />
  7. </div>

Junto con:

Código Javascript:
Ver original
  1. showimg();
  2. var intervalo = setInterval("showimg()",3000);

¿Alguien sabe como puedo hacer que las cinco imágenes cambien de golpe con un efecto de fade?