Hola, quisieran que porfavor me ayudaran con un problema, debo hacer un juego con rotacion de imagenes, estas imagenes cada determinado tiempo cambian de posicion, el codigo que tengo actualmente rota las imagenes cada determinado tiempo lo unico que me falta es que las imagenes no se repitan!, llevo horas tratando de resolver esto y la verdad no he podido, agradeceria cualquier ayuda, de antemano muchas gracias,
este es el codigo que tengo
Código HTML:
<html>
<head>
<title>
Prueba de rotación aleatoria de imágenes
</title>
<script type="text/javascript">
<!--
// Conjunto de nombres de las imagenes a rotar
imagenes = new Array (
'imagenes/Albania.png',
'imagenes/Andorra.png',
'imagenes/Algeria.png',
'imagenes/Argentina.png',
'imagenes/Aruba.png',
'imagenes/Brazil.png',
'imagenes/Cameroon.png',
'imagenes/China.png',
'imagenes/Colombia.png');
espera = 3;
imagen_actual = 0;
function cambio ()
{ var i=0;
for(i=0;i<imagenes.length;i++)
{
ima = Math.floor (Math.random () * imagenes.length);
var uti= new Array;
uti[i]=ima;
document.getElementById('div'+i).innerHTML="<img src='"+imagenes[ima]+"' />";
}
if (imagen_actual >= imagenes.length)
imagen_actual = 0;
self.setTimeout ('cambio()', espera * 1000);
}
function rotar ()
{
var aux, i, pos;
for (i = 0; i < imagenes.length; i++) {
pos = Math.floor (Math.random () * imagenes.length);
if (pos != i) {
aux = imagenes[i];
imagenes[i] = imagenes[pos];
imagenes[pos] = aux;
}
}
cambio ();
}
-->
</script>
</head>
<body onLoad="rotar()">
<div id="div0" style="float:left"></div>
<div id="div1" style="float:left"></div>
<div id="div2" style="float:left"></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="div3" style="float:left"></div>
<div id="div4" style="float:left"></div>
<div id="div5" style="float:left"></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="div6" style="float:left"></div>
<div id="div7" style="float:left"></div>
<div id="div8" style="float:left"></div>
</body>
</html>