javascript - ページの読み込み時に 5 つの画像の順序を変更する

Question

Web ページのサイドバーに 5 つの画像を縦に表示したいと考えています。ページを更新または再読み込みするたびに順序を変更したい。1 つの画像を から表示するための多くのソリューションがあります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/