初めて質問させていただきます。
16点の画像データとそれぞれに対してコメントが16点あります。それらを4点づつランダム表示させたいのですが、方法を教えていただけませんか?
例として「こんな感じ」というサイトがありました!
【ECナビ~ECナビランキング~】
トップページ中段にあります。
http://ecnavi.jp/
こちらのサイトのように
【アクセス時に、各4点を表示(画像+テキスト)】
画像 画像 画像 画像
Text Text Text Text
↓
【更新すると別の4点を表示(画像+テキスト)】
画像 画像 画像 画像
Text Text Text Text
このように更新するたびに、表示が4パターンで切り替わります。
ちなみに、画像とテキスト4点はグループになっています。
私はまだ初心者なので、出来るだけ簡単に教えていただけると嬉しいです(>_<;)「わがままでしゅみません…」
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
たとえばこんな感じでいかがでしょうか?
わからない箇所はご自身で調べていただきどうしても
ということがあればご説明もできるかと
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- その他(プログラミング・Web制作) Pythonについての質問です。 初心者ほやほやなのでお手柔らかにお願いします。 今手引きにそって入 2 2022/09/22 21:56
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Illustrator(イラストレーター) 「頂点で線分を伸ばす」作業がうまく行かない。 1 2022/09/09 10:19
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
Gifアニメ、最後のコマに行った...
-
画像ランダム表示、しかしダブ...
-
画像を切り替えランダム表示
-
画像をクリックしてその地点の...
-
画像クリック→メッセージボック...
-
innerHTMLで、表示すると、一部...
-
lightboxで複数サムネイル表示
-
HTMLで条件分岐はできますか?
-
残像を残しながらjpg画像を自動...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
【CSS】floatで左右に並べた...
-
Slick.jsのオプションrtlについて
-
クリックして変更した画像を他...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報