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

时间:2013-07-21 08:12:15

标签: javascript

我想在我的网页侧边栏中垂直显示5张图片。我希望每次刷新或重新加载页面时都要更改序列顺序。有一种图像可以从n numbers中显示出来。但我无法为5张图像找到这样的解决方案(所有图像都是一次性垂直显示,但每次加载时序列都会改变)

所有这些图片都有各自的链接网址。我正在寻找JavaScript解决方案。

2 个答案:

答案 0 :(得分:0)

我不太了解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]]);

对于洗牌阵列,您应该访问How can I shuffle an array?

答案 1 :(得分:0)

您可以尝试以下代码:(只需更改数组中的图像名称)

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/