javascript - 在页面加载时更改 5 个图像的顺序

Question

我想在我的网页侧边栏中垂直显示 5 张图像。我希望每次刷新或重新加载页面时都更改顺序。有很多解决方案可以显示一张图像n numbers。但我无法为 5 张图像找到这样的解决方案（所有图像一次垂直显示，但每次页面加载时顺序都会改变）

所有这些图像都有单独的链接 URL。我正在寻找 JavaScript 解决方案。

Answer 1

我不太了解javascript，但您应该可以用伪代码编写它：

ArrayOfStrings[0] = "image1.jpg"
ArrayOfStrings[1] = "image2.jpg"
ArrayOfStrings[2] = "image3.jpg"
ArrayOfStrings[3] = "image4.jpg"

ArrayOfIds = {0, 1, 2, 3}

加载页面时：

Shuffle(ArrayOfIds);

SetImg1Urs(ArrayOfStrings[ArrayOfIds[0]]);
SetImg2Urs(ArrayOfStrings[ArrayOfIds[1]]);
SetImg3Urs(ArrayOfStrings[ArrayOfIds[2]]);
SetImg4Urs(ArrayOfStrings[ArrayOfIds[3]]);

对于洗牌数组，您应该访问如何洗牌数组？

Answer 2

您可以尝试以下代码：（只需更改数组中的图像名称）

var array = ['1.png', '2.png', '3.png', '4.png', '5.png'];
var str = ['0', '1', '2', '3', '4'];
for(var j, x, i = str.length; i; j = parseInt(Math.random() * i), x = str[--i], str[i] = str[j], str[j] = x);
for(var i=0;i<=4;i++){ 
    var arr = array[str[i]];
    document.getElementById('sidebar').innerHTML += '<img src="'+arr+'"><br>';
}

JSFiddle：http: //jsfiddle.net/FlameTrap/ZUssR/