我的设置和随机播放数组函数的调用在哪里出错？

问题描述 投票：0回答：1

我能够循环执行功能to display 5 random images。现在，我想使用相同的5张图像并将它们随机播放，其中每张图像仅显示一次（给出5张！= 120个排列）。

我已经找到了很多有关如何随机播放和显示随机数（而不是图像）的技巧，但是我认为我的问题是设置然后调用函数。我该怎么办？

假设：

  1. 我需要在<style>标签之间定义随机播放功能
  2. 我的图像数组可以保持不变（因为它是相同的，因此请务必确保从新URL更新所有更改的引用）
  3. [shuffle函数在页面的主体中被调用（我不确定这一点）

用简单的英语我想实现：

“将集合中的五张图像放入，并按任意顺序排列一次。”

会发生什么：

出现五张图像，经常重复图像。

成功的网页具有此：

    </style>
<script type="text/javascript">
// place your images in this array
var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function getRandomImage(imgAr, path) {
    path = path || '../Public/images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>
</head>
<body>

然后是这个（我假设是函数的调用）

<div>
    <!-- This script segment displays an image from the array -->
    <script type="text/javascript">for (i = 0; i < 5; i++) getRandomImage(random_images_array, 'images/')</script>
</div>

我该如何解决？

javascript image function shuffle method-call
1个回答
0
投票

我认为您不必每次都随机获取数组项，而是可以随机整理数组。这样可以确保您每次都有不同的图像，例如：

var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function shuffleArray(arr) {
   for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
   }
}

// Shuffle images here
random_images_array = shuffleArray(random_images_array);

function getRandomImage(img, path) {
   path = path || '../Public/images/'; // default path here
   var imgStr = '<img src="' + path + img + '" alt = "">';
   document.write(imgStr);
   document.close();
}

for (i = 0; i < 5; i++)
   getRandomImage(random_images_array[i], 'images/')
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.