- 締切済み
複数のランダム表示について
現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。
- satotake1111
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
詳しくありませんが、こんなのでは？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> ul#banner, ul#banner li{ margin:0; padding:0; list-style-type:none; } ul#banner li a{ display:block; } ul#banner li img{ width:200px; height:80px; border:0; } </style> </head> <body> <ul id="banner"> <li> <a href="http://1.jp/" target="_blank"><img src="./1.jp/img/1画像.jpg" alt="1"></a> 1テキスト</li> <li> <a href="http://2.jp/" target="_blank"><img src="./2.jp/img/2画像.jpg" alt="2"></a> 2テキスト</li> <li> <a href="http://3.jp/" target="_blank"><img src="./3.jp/img/3画像.jpg" alt="3"></a> 3テキスト</li> <li> <a href="http://4.jp/" target="_blank"><img src="./4.jp/img/4画像.jpg" alt="4"></a> 4テキスト</li> </ul> <script type="text/javascript"> (function(){ var ul = document.getElementById("banner"); var li = ul.getElementsByTagName("li"); var elms = [], n = li.length, i, j, e; for(i=0; i<n;) elms.push(li[i++]); while(--i){ j = Math.floor(Math.random()*(i + 1)); e = elms[i]; elms[i] = elms[j]; elms[j] = e; } for(i=0; i<n;) ul.appendChild(elms[i++]); })(); </script> </body> </html>
