画像とテキストのセットをランダム表示させたいんですが・・・

質問

初めて質問させていただきます。

１６点の画像データとそれぞれに対してコメントが１６点あります。それらを４点づつランダム表示させたいのですが、方法を教えていただけませんか？

例として「こんな感じ」というサイトがありました！
【ECナビ～ECナビランキング～】
トップページ中段にあります。
http://ecnavi.jp/

こちらのサイトのように

【アクセス時に、各４点を表示（画像＋テキスト）】
画像　　　画像　　　画像　　　画像
Text　　　Text　　　Text　　　Text　
　　　　　　　　↓
【更新すると別の４点を表示（画像＋テキスト）】
画像　　　画像　　　画像　　　画像
Text　　　Text　　　Text　　　Text　

このように更新するたびに、表示が４パターンで切り替わります。
ちなみに、画像とテキスト４点はグループになっています。

私はまだ初心者なので、出来るだけ簡単に教えていただけると嬉しいです(>_<;)「わがままでしゅみません…」

回答No.1

yambejp

たとえばこんな感じでいかがでしょうか？
わからない箇所はご自身で調べていただきどうしても
ということがあればご説明もできるかと

<script language="javascript">
a=new Array()
for(var i=0;i<4;i++){
a[i]=new Array()
for(var j=0;j<4;j++){
a[i][j]=new Object()
}
}
a[0][0].src="image01.jpg"
a[0][1].src="image02.jpg"
a[0][2].src="image03.jpg"
a[0][3].src="image04.jpg"
a[1][0].src="image05.jpg"
a[1][1].src="image06.jpg"
a[1][2].src="image07.jpg"
a[1][3].src="image08.jpg"
a[2][0].src="image09.jpg"
a[2][1].src="image10.jpg"
a[2][2].src="image11.jpg"
a[2][3].src="image12.jpg"
a[3][0].src="image13.jpg"
a[3][1].src="image14.jpg"
a[3][2].src="image15.jpg"
a[3][3].src="image16.jpg"

a[0][0].text="aaa"
a[0][1].text="bbb"
a[0][2].text="ccc"
a[0][3].text="ddd"
a[1][0].text="eee"
a[1][1].text="fff"
a[1][2].text="ggg"
a[1][3].text="hhh"
a[2][0].text="iii"
a[2][1].text="jjj"
a[2][2].text="kkk"
a[2][3].text="lll"
a[3][0].text="mmm"
a[3][1].text="nnn"
a[3][2].text="ooo"
a[3][3].text="ppp"

var num=Math.floor(Math.random()*4);
for(var i=0;i<4;i++){
document.write("<div style='float:left'>")
document.write("<img src='"+a[num][i].src+"'/><br>")
document.write(a[num][i].text)
document.write("</div>")
}
document.write("<div style='clear:both'></div>")
</script>

お礼

yambejpさん、ありがとうございます。
早速チャレンジしてみます！