如何通过修改此代码使图像随机但不重复

时间：2013-05-17 17:35:55

标签： javascript random repeat

以下代码是我网站上唯一可用的代码（在线模板构建），其他javascript崩溃了。 （我是网络编程的新手）我是否可以对此代码进行简单的更改，以便在显示所有图片之前没有重复的图片？

var delay=7000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()
randomimages[0]="content/indsidebar1(2).jpg"
randomimages[1]="content/indsidebar2.jpg"
randomimages[2]="content/indsidebar3(3).jpg"
randomimages[3]="content/indsidebar6a.jpg"
randomimages[4]="content/indsidebar5.jpg"
randomimages[5]="content/indsidebar6.jpg"
randomimages[6]="content/indsidebar7.jpg"
randomimages[7]="content/indsidebar8.jpg"
randomimages[8]="content/indsidebar9.jpg"
randomimages[9]="content/indsidebar10.JPG"
randomimages[10]="content/commersidebar1.JPG"
randomimages[11]="content/commersidebar2.JPG"
randomimages[12]="content/commersidebar4.JPG"
randomimages[13]="content/commersidebar5.JPG"
randomimages[14]="content/commersidebar6.JPG"
randomimages[15]="content/commersidebar7.JPG"
randomimages[16]="content/ressidebar1.JPG"
randomimages[17]="content/ressidebar2.JPG"
randomimages[18]="content/ressidebar3.JPG"
randomimages[19]="content/ressidebar4.JPG"
randomimages[20]="content/communsidebar1.JPG"
randomimages[21]="content/communsidebar3.JPG"
randomimages[22]="content/communsidebar4.JPG"
randomimages[23]="content/communsidebar5.JPG"
randomimages[24]="content/communsidebar6.JPG"
randomimages[25]="content/communsidebar7.JPG"
randomimages[26]="content/communsidebar8.JPG"
randomimages[27]="content/communsidebar10.JPG"
randomimages[28]="content/undersidebar1.jpg"
randomimages[29]="content/undersidebar2(1).jpg"
randomimages[30]="content/undersidebar3.jpg"
randomimages[31]="content/undersidebar4.jpg"
randomimages[32]="content/servicesidebar1.jpg"
randomimages[33]="content/servicesidebar2.jpg"
randomimages[34]="content/servicesidebar6.jpg"
randomimages[35]="content/servicesidebar4.JPG"
randomimages[36]="content/servicesidebar5.JPG"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+
  randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{
    if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))))
        curindex=curindex==0? 1 : curindex-1
    else
        curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

5 个答案:

答案 0 :(得分：1)

我同意Derek Henderson有关更好编码的建议。

您可以使用以下逻辑：

  1. 将randomimages复制到original_randomimages数组。
  2. Pick＆amp;显示来自数组randomimages的随机图片（例如ith元素）。
  3. 使用拼接方法（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice）从randomimages数组中删除显示的图片。
  4. 重复步骤2＆amp; 3，直到randomimages数组为空。
  5. 将original_randomimages复制到randomimages。
  6. 从第2步再次重复。

答案 1 :(得分：0)

如果要在随机生成图像后重复随机化，可以编写与此类似的函数，然后在退出while循环后再次调用该函数。

var delay=7000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()
randomimages[0]="content/indsidebar1(2).jpg"
randomimages[1]="content/indsidebar2.jpg"
randomimages[2]="content/indsidebar3(3).jpg"
randomimages[3]="content/indsidebar6a.jpg"
randomimages[4]="content/indsidebar5.jpg"
randomimages[5]="content/indsidebar6.jpg"
randomimages[6]="content/indsidebar7.jpg"
randomimages[7]="content/indsidebar8.jpg"
randomimages[8]="content/indsidebar9.jpg"
randomimages[9]="content/indsidebar10.JPG"
randomimages[10]="content/commersidebar1.JPG"
randomimages[11]="content/commersidebar2.JPG"
randomimages[12]="content/commersidebar4.JPG"
randomimages[13]="content/commersidebar5.JPG"
randomimages[14]="content/commersidebar6.JPG"
randomimages[15]="content/commersidebar7.JPG"
randomimages[16]="content/ressidebar1.JPG"
randomimages[17]="content/ressidebar2.JPG"
randomimages[18]="content/ressidebar3.JPG"
randomimages[19]="content/ressidebar4.JPG"
randomimages[20]="content/communsidebar1.JPG"
randomimages[21]="content/communsidebar3.JPG"
randomimages[22]="content/communsidebar4.JPG"
randomimages[23]="content/communsidebar5.JPG"
randomimages[24]="content/communsidebar6.JPG"
randomimages[25]="content/communsidebar7.JPG"
randomimages[26]="content/communsidebar8.JPG"
randomimages[27]="content/communsidebar10.JPG"
randomimages[28]="content/undersidebar1.jpg"
randomimages[29]="content/undersidebar2(1).jpg"
randomimages[30]="content/undersidebar3.jpg"
randomimages[31]="content/undersidebar4.jpg"
randomimages[32]="content/servicesidebar1.jpg"
randomimages[33]="content/servicesidebar2.jpg"
randomimages[34]="content/servicesidebar6.jpg"
randomimages[35]="content/servicesidebar4.JPG"
randomimages[36]="content/servicesidebar5.JPG"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}


var checkArray = [];
var length = randomimages.length;

function generateImages () {

    var i = generateRandomValue();
    if (checkArray.length <= length){
        if(checkArray.indexOf(i) === -1) {
          document.write('<img name="defaultimage" src="'+randomimages[i]+'">')
          checkArray.push(i);
       } else {
          generateImages();      
       }
    } else if (checkArray.length === length) {
        checkArray = [];
        generateImages();
    }

 }

function  generateRandomValue () {

 return Math.floor(Math.random()*(randomimages.length));

}

function rotateimage()
{
    if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))))
        curindex=curindex==0? 1 : curindex-1
    else
        curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

generateImages();
setInterval("rotateimage()", delay);

答案 2 :(得分：0)

我稍微更改了你的代码，但是没有对它进行测试，所以请检查一下，但它应该可以正常工作。

<script language="javascript">

var delay=7000; //set delay in miliseconds
var curindex=0;

var randomimages= [];

    randomimages[0]="content/indsidebar1(2).jpg";
    randomimages[1]="content/indsidebar2.jpg";
    randomimages[2]="content/indsidebar3(3).jpg";
    randomimages[3]="content/indsidebar6a.jpg";
    randomimages[4]="content/indsidebar5.jpg";
    randomimages[5]="content/indsidebar6.jpg";
    randomimages[6]="content/indsidebar7.jpg";
    randomimages[7]="content/indsidebar8.jpg";
    randomimages[8]="content/indsidebar9.jpg";
    randomimages[9]="content/indsidebar10.JPG";


    randomimages[10]="content/commersidebar1.JPG";
    randomimages[11]="content/commersidebar2.JPG";
    randomimages[12]="content/commersidebar4.JPG";
    randomimages[13]="content/commersidebar5.JPG";
    randomimages[14]="content/commersidebar6.JPG";
    randomimages[15]="content/commersidebar7.JPG";


    randomimages[16]="content/ressidebar1.JPG";
    randomimages[17]="content/ressidebar2.JPG";
    randomimages[18]="content/ressidebar3.JPG";
    randomimages[19]="content/ressidebar4.JPG";


    randomimages[20]="content/communsidebar1.JPG";
    randomimages[21]="content/communsidebar3.JPG";
    randomimages[22]="content/communsidebar4.JPG";
    randomimages[23]="content/communsidebar5.JPG";
    randomimages[24]="content/communsidebar6.JPG";
    randomimages[25]="content/communsidebar7.JPG";
    randomimages[26]="content/communsidebar8.JPG";
    randomimages[27]="content/communsidebar10.JPG";




    randomimages[28]="content/undersidebar1.jpg";
    randomimages[29]="content/undersidebar2(1).jpg";
    randomimages[30]="content/undersidebar3.jpg";
    randomimages[31]="content/undersidebar4.jpg";



    randomimages[32]="content/servicesidebar1.jpg";
    randomimages[33]="content/servicesidebar2.jpg";
    randomimages[34]="content/servicesidebar6.jpg";
    randomimages[35]="content/servicesidebar4.JPG";
    randomimages[36]="content/servicesidebar5.JPG";


//You are not using preload anywhere so it is not necessary

var irand = Math.floor(Math.random()*(randomimages.length));

document.write('<img name="defaultimage" src="'+randomimages[irand]+'">');

var shown = [];
shown[irand] = true;

function rotateimage()
{
    var itemp = Math.floor(Math.random()*(randomimages.length));
    if(shown[itemp])
       return;
    document.images.defaultimage.src=randomimages[itemp];
    shown[itemp] = true;
    if (shown.length == 36)
        shown = [];
}

setInterval(rotateimage, delay);

    </script>

<强>更新 更正版本：

<script language="javascript">

    var delay=7000; //set delay in miliseconds
    var curindex=0;

    var randomimages= [];

        randomimages[0]="content/indsidebar1(2).jpg";
        randomimages[1]="content/indsidebar2.jpg";
        randomimages[2]="content/indsidebar3(3).jpg";
        randomimages[3]="content/indsidebar6a.jpg";
        randomimages[4]="content/indsidebar5.jpg";
        randomimages[5]="content/indsidebar6.jpg";
        randomimages[6]="content/indsidebar7.jpg";
        randomimages[7]="content/indsidebar8.jpg";
        randomimages[8]="content/indsidebar9.jpg";
        randomimages[9]="content/indsidebar10.JPG";


        randomimages[10]="content/commersidebar1.JPG";
        randomimages[11]="content/commersidebar2.JPG";
        randomimages[12]="content/commersidebar4.JPG";
        randomimages[13]="content/commersidebar5.JPG";
        randomimages[14]="content/commersidebar6.JPG";
        randomimages[15]="content/commersidebar7.JPG";


        randomimages[16]="content/ressidebar1.JPG";
        randomimages[17]="content/ressidebar2.JPG";
        randomimages[18]="content/ressidebar3.JPG";
        randomimages[19]="content/ressidebar4.JPG";


        randomimages[20]="content/communsidebar1.JPG";
        randomimages[21]="content/communsidebar3.JPG";
        randomimages[22]="content/communsidebar4.JPG";
        randomimages[23]="content/communsidebar5.JPG";
        randomimages[24]="content/communsidebar6.JPG";
        randomimages[25]="content/communsidebar7.JPG";
        randomimages[26]="content/communsidebar8.JPG";
        randomimages[27]="content/communsidebar10.JPG";




        randomimages[28]="content/undersidebar1.jpg";
        randomimages[29]="content/undersidebar2(1).jpg";
        randomimages[30]="content/undersidebar3.jpg";
        randomimages[31]="content/undersidebar4.jpg";



        randomimages[32]="content/servicesidebar1.jpg";
        randomimages[33]="content/servicesidebar2.jpg";
        randomimages[34]="content/servicesidebar6.jpg";
        randomimages[35]="content/servicesidebar4.JPG";
        randomimages[36]="content/servicesidebar5.JPG";


    //You are not using preload anywhere so it is not necessary

    var irand = Math.floor(Math.random()*(randomimages.length));

    document.write('<img name="defaultimage" src="'+randomimages[irand]+'">');

    var shown = [];
    shown[irand] = true;

    function rotateimage()
    {
        var itemp = Math.floor(Math.random()*(randomimages.length));
        if(shown[itemp])
           return;
        document.images.defaultimage.src=randomimages[itemp];
        shown[itemp] = true;
        if (shown.length == 36)
            shown.pop();
    }

    setInterval(rotateimage, delay);

        </script>

答案 3 :(得分：0)

正如我在评论中所说，我建议使用数组的Shuffle（Fisher-Yates是我首选的算法）。类似于：

function ShuffleImages(){
    for(var i = randomimages.length - 1; i > 0; i--){
        var j = Math.floor(Math.random() * i);
        var _tmp = randomimages[i];
        randomimages[i] = randomimages[j];
        randomimages[j] = _tmp;
    }
}

这在创建随机化时不会发生冲突，并确保没有重复的图像。然后，您可以正常迭代数组，并在需要时再次进行随机播放。

答案 4 :(得分：0)

只需从源中删除已显示的图片

<script language="javascript">
var delay = 7000; //set delay in miliseconds
var curindex = 0;

var randomimages = [
    "content/indsidebar1(2).jpg",
    "content/indsidebar2.jpg",
    "content/indsidebar3(3).jpg",
    // add the rest of your images here without , at the end
];

// make a copy of your array as source
var src = randomimages.slice(0);

var preload = [];

for (var n = 0; n < randomimages.length; n++)
{
    preload[n] = new Image();
    preload[n].src = randomimages[n];
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random() * randomimages.length)]+'">');

function rotateimage()
{
    if (curindex == (tempindex=Math.floor(Math.random()*(randomimages.length)))){
        curindex = curindex == 0 ? 1 : curindex - 1;
    } else {
        curindex = tempindex;
    }

    document.images.defaultimage.src = randomimages[curindex];

    // remove from source
    ramdomimages.splice(curindex, 1);

    // re-copy src when empty to start new run
    if (randomimages.length == 0) {
        randomimages = src.slice(0);
    }
}

setInterval(
    function() {
        rotateimage();
    }
    , delay
);
</script>
相关问题
最新问题