带有Javascript的随机图像，无需重复

Question

一直在Google搜索中得到了很多结果，但我无法成功实现。

我使用javascriptkit中的这些代码来显示数组中的随机图像。

<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()

myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1

document.write('<img src="'+myimages[ry]+'" border=0>')
}

random_imglink()
//-->
</script>

该脚本效果很好，但是图像有时会重复自身（例如img6.gif-> img4.gif-> img4.gif），希望显示的图像与上一个图像没有重复。

我对javascript和编程并不十分熟悉，这是我第一次尝试使用javascript，因此对您有所帮助。

Answer 1

一个普遍的答案：我认为随机函数的工作方式可以做到，因此除非您从数组中删除了使用的图像，否则您不会跳过重复的图像。 因此，一个想法可能是使数组成为函数外部的全局变量，并删除已经使用的图像。 然后在主函数中，如果删除后数组的大小为零，则可以用原始图像集重新加载数组。 只是一个想法，如果您遇到麻烦，请尝试一下：)

Answer 2

您可以创建一个数组，在其中可以存储已使用的ID。 然后，您需要找到不在此数组中的随机ID。

这里有示例代码：

var usedIds = [];
...

var ry = 0;
if(userIds.length != myimages.length) { 
    // If we haven't used all the images
    do {
        ry = Math.floor(Math.random()*myimages.length);
    } while (usedIds.indexOf(ry) > -1);

    // here we have new randomized and unique image id
    usedIds.push(ry);
    // do something with new id
} else {
    // we have already used all the images
}

Answer 3

 var intervalID; var showed = {}; var loopCount = 0; function random_imglink(){ var myimages=new Array() myimages[1]="image1.gif" myimages[2]="image2.gif" myimages[3]="image3.gif" myimages[4]="image4.gif" myimages[5]="image5.gif" myimages[6]="image6.gif" var ry=Math.floor(Math.random()*myimages.length); if (ry===0) ry=1; var src = myimages[ry] document.body.innerHTML+=('<br>' + Object.keys(showed).length + '/' + myimages.length); // if all images showed if( Object.keys(showed).length === myimages.length - 1 ){ // |___| // ^ // | // this is what i modified -----------------------+ //we reset the showed cache showed = {}; // we increment the loopCount loopCount = loopCount + 1; if(loopCount === 3 ){ clearInterval( intervalID ); return; } document.body.innerHTML+=('<hr>incremting loopCount<hr>'); } // if this src have been showed we random_imglink; if( showed[src] ) return random_imglink(); document.body.innerHTML+=('<br>img src="'+myimages[ry]+'" border=0>'); //we store the showed img showed[src] = true; } document.body.innerHTML+=('we start : <br>'); intervalID = setInterval( random_imglink , 500) 

---

我不了解您的约束，但是如果您拥有代码，并且可以按自己的需要/需要对其进行修改，并且一旦您了解上述方法并不是更加优化，也许您应该考虑使用此版本！

 var id; var i = 0; var loopCount = 0; var myimages=[]; // we want a clone array of your myimages[] // because we want modify it, and keep safe the original. // it will be copied later var clonedImages ; myimages.push("image1.gif"); myimages.push("image2.gif"); myimages.push("image3.gif"); myimages.push("image4.gif"); myimages.push("image5.gif"); myimages.push("image6.gif"); // ^ // | // Don't have to worry about images index // Just push in the array in the order you need. function ran_link(){ // if we have no clone or clone is empty // we create it if(! clonedImages || ! clonedImages.length ){ if(loopCount >= 3) { clearInterval(id); return; } // we create a clone of myImages clonedImages = myimages.slice(0 , myimages.length); loopCount= loopCount + 1; document.body.innerHTML+=('<br> loop : ' + loopCount); i=0; } // We work here only with the existant element // | // V var ry =Math.floor(Math.random() * clonedImages.length); // we extract the element from the array // so the array.length will be -1 var currentImage = clonedImages.splice(ry,1); // currentImage is an array of 1 element // we get the value at index 0 var currentImageURL = currentImage[0]; document.body.innerHTML+=('<br>' + (i++) + ' : ' + currentImageURL + ' <==> ' + ry); return cur; } id = setInterval(ran_link , 500);