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

【问题标题】：How to make an image random but not repeat by modifying this code如何通过修改此代码使图像随机但不重复
【发布时间】：2013-05-18 03:15:06
【问题描述】：

以下代码是在我的网站上工作的唯一代码（使用在线模板构建）所有其他 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)

【问题讨论】：

  • 这不会回答您的问题，但会帮助您编写更好的代码。删除 language="javascript"，因为它已被弃用。将new Array() 替换为[]，这是实例化数组的更好方法。并且不要使用document.write；而是将图像插入 DOM。
  • 您可能需要查看Fisher-Yates Shuffle 以随机化图像的顺序。
  • @DerekHenderson 你有没有关于[] 是实例化数组的更好方法的参考？
  • 是的，让我为您搜索一下。 1 秒。
  • @DannyBeckett，给你：mattlunn.me.uk/blog/2012/04/the-use-of-literals-vs-constructors

标签： javascript random repeat


【解决方案1】：

我同意Derek Henderson 提出的更好编码的建议。

或许你可以使用以下逻辑：

  1. 将 randomimages 复制到 original_randomimages 数组。
  2. 从数组 randomimages 中选择并显示一张随机图片（例如第 i 个元素）。
  3. 使用拼接方法从 randomimages 数组中移除显示的图片 (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice)。
  4. 重复第 2 步和第 3 步，直到 randomimages 数组为空。
  5. 将 original_randomimages 复制到 randomimages。
  6. 从第 2 步开始再次重复。

【讨论】：

    【解决方案2】：

    正如我在 cmets 中所述，我建议使用数组的随机播放（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;
    }
}

    这在创建随机化时不会产生冲突，并确保没有重复的图像。然后，您可以像往常一样遍历数组，并在需要时再次随机播放。

    【讨论】：

      【解决方案3】：

      只需从您的来源中删除已显示的图像

      <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>

      【讨论】：

        【解决方案4】：

        如果您想在随机生成图像后重复随机化，您可以编写一个类似的函数，然后在退出 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);

        【讨论】：

        • 很酷，谢谢，但我真的是新手。关于我所拥有的，我不知道将这段代码放在哪里。您可以将其添加到我的代码中，以便我可以全部复制吗？感谢您的帮助
        【解决方案5】：

        我稍微修改了你的代码，但没有测试，所以请检查一下，但它应该可以工作。

        <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>

        【讨论】：

        • 试过了。适用于图片旋转 1 次，但在所有图片循环通过后停止....
        • 至于preload[]，它允许浏览器在需要之前加载和缓存图像。它们不会在使用前都被加载（因为没有等待它们完成加载），但它们中的很多会被加载。因此，虽然不是严格必要，但它可以帮助提升用户体验。
        • 是的，XGundam05，但是不缓存对服务器来说更好，所以如果用户不等待查看所有 37 张图片，服务器的占用率就会降低。
        • @ThomasKos，这是真的。我想这真的取决于应用程序的重点。
        • @user2394920 好的，请将shown = [];所在的行改为shown.pop();。它现在应该可以完美运行了。
        猜你喜欢
        • 2021-05-18
        • 2017-01-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-24
        • 1970-01-01
        • 1970-01-01
        • 2017-11-12
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode