随机播放图像 javascript/jquery答案

【问题标题】：Shuffle images javascript/jquery随机播放图像 javascript/jquery
【发布时间】：2013-03-06 13:34:16
【问题描述】：

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

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

【问题讨论】：

可能，你需要遍历它
请向我们展示您到目前为止所做的尝试。

标签： javascript jquery arrays image list

【解决方案1】：

您可以使用 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:])

【讨论】：

【解决方案2】：

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

首先，分解操作：

    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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

这不会以随机顺序添加图像，请参阅我的答案。

【解决方案4】：

要保持插入顺序随机，请使用 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>

【讨论】：

【解决方案5】：

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

【讨论】：