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 :
<script>
function myrand(number)
{
return Math.floor(Math.random()*number);
}
var size = 12;
var num_chosen = 5;
var my_images = new Array(size);
my_images[0]="fot1.jpg";
my_images[1]="fot2.jpg";
my_images[2]="fot3.jpg";
my_images[3]="fot4.jpg";
my_images[4]="fot5.jpg";
my_images[5]="fot6.jpg";
my_images[6]="fot7.jpg";
my_images[7]="fot8.jpg";
my_images[8]="fot9.jpg";
my_images[9]="fot10.jpg";
//y el resto de la lista
function showimg()
{
for (i = 0; i < num_chosen; ++i)
{
choice = myrand( size - i ) + i;
temp = my_images[choice];
my_images[choice] = my_images[i];
my_images[i] = temp;
}
for (i = 0; i < num_chosen; ++i)
{
document.getElementById('foto'+[i]).src = 'img/img_ciclos/'+ my_images[i] +'';
}
}
</script>Y en el html
Código HTML :
<div class="pics"> <img id="foto0" /> <img id="foto1" /> <img id="foto2" /> <img id="foto3" /> <img id="foto4" /> </div>
Junto con:
Código Javascript :
<script>
showimg();
var intervalo = setInterval("showimg()",3000);
</script>
¿Alguien sabe como puedo hacer que las cinco imágenes cambien de golpe con un efecto de fade?
