Eso está bien para galerías con muchos elementos de array, porque hay menos posibilidades de que ¡justo! se nos repita el mismo. Aunque alguien se va a venir a quejar del consumo de recursos.
En temas paralelos estuvimos ahondando sobre el método shuffle. Hay varias formas de lograrlo, cada una con más o menos ventajas, y hacerla "fácil" quizá requiera algunas concesiones de nuestra parte.
Muestro una variante del ejemplo que puse en
#3
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ROTADOR 2. </title>
<script type="text/javascript">
var banners = new Array();
banners[0]= new Array("http://imageshack.us/a/img109/5243/nataliamolinero.jpg",
"http://imageshack.us/photo/my-images/109/nataliamolinero.jpg/");
banners[1]= new Array("http://imageshack.us/a/img513/3887/pedroroth.jpg",
"http://imageshack.us/photo/my-images/513/pedroroth.jpg/");
banners[2]= new Array("http://imageshack.us/a/img848/1629/christianamezcua.jpg",
"http://imageshack.us/photo/my-images/848/christianamezcua.jpg/");
banners[3]= new Array("http://imageshack.us/a/img195/4783/urinegvi.jpg",
"http://imageshack.us/photo/my-images/195/urinegvi.jpg/");
var elige = [];
var limite = banners.length;
function rotar0() {
limite--;
elige = banners.splice(Math.floor(Math.random() * limite), 1);
//alert(elige)
//alert(banners)
document.getElementById( "muestra" ).src = elige[0][0];
document.getElementById( "enlace" ).href =
document.getElementById( "ruta" ).innerHTML = elige[0][1];
banners.push([elige[0][0], elige[0][1]]);
//alert(banners)
document.getElementById( "lista" ).innerHTML += elige[0][1]+"\r\n";
if (limite == 0){
//alert(limite)
limite = banners.length;
banners.concat(elige);
//alert(banners)
elige = [];
//alert(elige)
document.getElementById( "lista" ).innerHTML += "\r\n";
}
document.getElementById( "ruta" ).style.color =
(document.getElementById( "ruta" ).style.color == "blue")? "red" : "blue";
setTimeout(rotar0, 2000);
}
onload = rotar0;
</script>
<style type="text/css">
p {text-align: center; }
</style>
</head>
<body>
<p>
<a href="#" id="enlace"><img src="" alt="" width=320 height=240 id="muestra"></a>
</p>
<p id="ruta"></p>
<textarea id="lista" rows=40 cols=70></textarea>
</body>
</html>
Lo que inmediatamente notamos aquí es que para evitar la repetición de la última imagen de una serie con la primera del que le sigue, se usa un método simple y casi reprobable : dejar un elemento "fijo", que mantenga su posicion mientras el resto, sí, es ordenado de manera aleatoria y sin repetirse entre ellos.
Este banner fijo (la cuarta imagen) se muestra en el mismo orden en todas las series y sirve de separador. En la práctica, a menos que alguien se ponga a contar la secuencia, da la ilusión de que aparece en medio de las otras.
Después de notar eso, ya encontramos otro inconveniente : si las imágenes son elegidas al azar, perfectamente puede repetirse la secuencia de las tres primeras ... de casualidad.
Y esto ya va siendo más difícil de evitar. A menos que carguemos toda la secuencia previamente antes de mostrarla, y comparemos con la anterior. (tal como sugeriste en el post
#6,
IsaBelM.)
O que simulemos un orden aleatorio, que no sea aleatorio.
Cuanta más cantidad de baners haya, más fácil será disimular estas
licencias de programación.
juego en JS Duda con shuffle