我如何使此javascript以随机顺序显示图像？

Question

所以，我对javascript还是很陌生，我意识到那里也有类似的问题，但是我看不到如何使它们与我发现的脚本一起使用，我正在尝试学习。

下面的脚本似乎很简单并且运行良好，但是我想知道如何添加代码以使图像以随机顺序显示。

请帮助。...

<script>
var i = 0; // Start point
var images = [];
var time = 5000;

// Image List
images[0] = 'images/image1.jpg';
images[1] = 'images/image2.jpg';
images[2] = 'images/image3.jpg';
images[3] = 'images/image4.jpg';


// Change Image
function changeImg(){
    document.slide.src = images[i];

    if(i < images.length - 1){
        i++;
    } else {
        i = 0;
    }

    setTimeout("changeImg()", time);
}


window.onload = changeImg;



</script>

Answer 1

您可以制作一个函数以在渲染之前对数组进行洗牌：

shuffle = function shuffle(array) {
  return array.sort(function () {
    return Math.random() - 0.5;
  });
};

然后在您的代码中显示图片之前先调用它：

var i = 0; // Start point
var images = [];
var time = 5000;

// Image List
images[0] = 'images/image1.jpg';
images[1] = 'images/image2.jpg';
images[2] = 'images/image3.jpg';
images[3] = 'images/image4.jpg';

// here! 
images = shuffle(images)

// Change Image
function changeImg(){
    document.slide.src = images[i];

    if(i < images.length - 1){
        i++;
    } else {
        i = 0;
    }

    setTimeout("changeImg()", time);
}

尽管，老实说，您可以通过多种其他方式来改进代码，因为编写的代码无法像您所拥有的那样运行。

Answer 2

这将为您提供图像数组中的随机数，因此为随机图像

Math.round(Math.random()*images.length)