javascript - 随机播放图像 javascript/jquery

Question

如何让这个脚本插入所有图像，而不仅仅是其中一个？我只想让它随机插入所有图像。

<script type="text/javascript">
    var images = ['basketball.jpg', 'running.jpg', 'tennis.jpg', 'running-woman.jpg', 'swimming.jpg', 'cycling.jpg'];
$('<img src="images/large/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#images');
</script>

Answer 1

要保持插入顺序随机，请使用 while 循环：

<script type="text/javascript">
    var images = ['basketball.jpg', 'running.jpg', 'tennis.jpg', 'running-woman.jpg', 'swimming.jpg', 'cycling.jpg'];

    while (images.length !== 0) {
        var index = Math.floor(Math.random() * images.length);
        $('<img src="images/large/' + images.splice(index, 1) + '">').appendTo('#images');
    }
</script>

Answer 2

使用需要使用循环来附加所有图像....

<script type="text/javascript">
    var images = ['basketball.jpg', 'running.jpg', 'tennis.jpg', 'running-woman.jpg', 'swimming.jpg', 'cycling.jpg'];

    $.each(images,function(i,v){
     $('<img src="images/large/' + images[i] + '">').appendTo('#images');
    });
</script>

Answer 3

您的代码选择一个图像，然后显示它。您需要对其进行重构，以便它会多次执行此操作。

首先，分解操作：

    var images = ... // fill array

    pick = Math.floor(Math.random() * images.length); // choose image

    tag = '<img src="images/large/' + images[pick] + '>'; // make tag

    $(tag).appendTo('#images'); // add tag

然后，设置循环重复，直到数组耗尽：

    var images = ... // fill array

    while (images.length>0) {
       pick = Math.floor(Math.random() * images.length); // choose image
       tag = '<img src="images/large/' + images[pick] + '>'; // make tag
       images = images.splice(i,1); // take picked image out of array
       $(tag).appendTo('#images'); // add tag
    }

我还没有运行这个，检查我用于“拼接”的数组索引是否正确，以便取出一张图像并从数组中取出正确的一张。您还可以获取 Array 删除功能，例如来自http://ejohn.org/blog/javascript-array-remove/

Answer 4

<script type="text/javascript">
    var images = ['basketball.jpg', 'running.jpg', 'tennis.jpg', 'running-woman.jpg', 'swimming.jpg', 'cycling.jpg'];

   for(var i=0;i<images.length;i++)
     $('<img src="images/large/' + images[i] + '">').appendTo('#images');

</script>

Answer 5

您可以使用 Fisher Yates Shuffle 算法在 javascript 中随机播放图像

您可以将图像集合存储在数组中。如以下代码所示，您可以将数组传递给函数并构造您的 shuffle :)

def fisherYatesShuffle(array):
if len(array) < 2:
    return

firstElementIndex = uniform(0, len(array))
swap(array[0], array[firstElementIndex])
fisherYatesShuffle(array[1:])