締切済み

複数のランダム表示について

2013/01/31 17:49

現在、外部の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)

2013/01/31 22:16 回答No.1

詳しくありませんが、こんなのでは？ <!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>

関連するQ&A

複数の画像をランダム（シャッフル）表示
１０枚の画像を更新するごとに重複せずランダム（シャッフル）させるにはどうしたらいいですか？理想は、JavaScriptは外部で読み込ませ、そして下記のようにHTMLでリストを使いランダム表示させたいのですが・・・ <ul> <li><a href="http://www.1/"><img src="s1.gif" /><br />あああ</a></li> <li><a href="http://www.2/"><img src="s2.gif" /><br />いいい</a></li> <li><a href="http://www.3/"><img src="s3.gif" /><br />ううう</a></li> <li><a href="http://www.4/"><img src="s4.gif" /><br />えええ</a></li> <li><a href="http://www.5/"><img src="s5.gif" /><br />おおお</a></li> <li><a href="http://www.6/"><img src="s6.gif" /><br />かかか</a></li> <li><a href="http://www.7/"><img src="s7.gif" /><br />ききき</a></li> <li><a href="http://www.8/"><img src="s8.gif" /><br />くくく</a></li> <li><a href="http://www.9/"><img src="s9.gif" /><br />けけけ</a></li> <li><a href="http://www.0/"><img src="s0.gif" /><br />こここ</a></li> </ul> 似たようなことをしているサイトがあったので参考に貼り付けておきます。 function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }// JavaScript Document 詳しい方いましたら教えて頂けませんか？宜しくお願いします。
- 締切済み
- JavaScript
画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですがそのときのリンク先をランダムにすることは出来ないでしょか？例えば、img[2] の画像が表示された場合、jmp[2] ではなく５つのアドレスの中からランダムにリンク先が決まる、というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
CSSで画像を均等に横並びに配置するには？
テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。下記のようなイメージで配置したいです。6列。行は可変。 ■…画像画像の数に応じて、はみだした画像は自動的に下に改行される感じです。 ■　■　■　■　■　■ ■　■　■　■　■ HMTLソースは以下のとおりです。 <ul> <li><a href="*"><img src="img/01.jpg" /></a></li> <li><a href="*"><img src="img/02.jpg" /></a></li> <li><a href="*"><img src="img/03.jpg" /></a></li> <li><a href="*"><img src="img/04.jpg" /></a></li> <li><a href="*"><img src="img/05.jpg" /></a></li> <li><a href="*"><img src="img/06.jpg" /></a></li> <li><a href="*"><img src="img/07.jpg" /></a></li> <li><a href="*"><img src="img/08.jpg" /></a></li> <li><a href="*"><img src="img/09.jpg" /></a></li> <li><a href="*"><img src="img/10.jpg" /></a></li> <li><a href="*"><img src="img/11.jpg" /></a></li> </ul> どのようにCSSを定義すればスマートでしょうか？よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
複数の要素へ appendchild できません
以下のような html があり、それぞれの画像リンクの後ろに <span>文章4</span>を追加したいのですが、できません。元の html <ol> <li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a></li> <li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a></li> </ol> <p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a></p> 作りたい html <ol> <li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a><span>文章4</span></li> <li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a><span>文章4</span></li> </ol> <p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a><span>文章4</span></p> 以下のようなスクリプトを書いてみたのですが、どうしても最後の要素（この場合は3番目の画像）へしか <span>文章4</span> が追加されません。全ての a タグの要素へ追加するにはどうしたらいいのでしょうか。 window.onload = function() { var addedSpan = document.createElement("span"); var addedTxt = document.createTextNode("文章4"); addedSpan.appendChild(addedTxt); var imgs = document.getElementsByTagName ("a"); for (var i=0; i<imgs.length; i++) { imgs[i].appendChild (addedSpan); } } 初歩的な質問でお恥ずかしいのですが、是非ご教授ください。どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。どうぞお知恵をお貸しください。よろしくお願いいたします。【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできませんイメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですがそれぞれの画像をオンマウスしたときに違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
ランダム表示
某サイトで　このようなスプリクトを手に入れたのですが設置した際に　横310Ｘ縦190と言う　表示画像サイズの指定の仕方がわかりません　いろいろ　試したのですが　素人のため　なかなか　うまくいきません　下のスプリクトにどこにどのようなタグを入れていいのか教えてください　皆様お力を貸してください <SCRIPT language="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
キャプション付きの複数画像を複数ランダムに表示
タイトルの通りなのですが、キャプションなしは検索して分かったのですが、キャプション付きだと分かりません。どなたかお教えください。参考にしたプログラムは、以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <script language="javascript">  </script> </HEAD> <BODY onLoad="Show()"> <a href="01.html"><IMG name="imgNumber1" src="img/img1.jpg" width="170" height="170" border="0"></a> <a href="02.html"><IMG name="imgNumber2" src="img/img2.jpg" width="170" height="170" border="0"></a> <a href="03.html"><IMG name="imgNumber3" src="img/img3.jpg" width="170" height="170" border="0"></a> </BODY> </HTML> <BODY>から</BODY>のプログラムでなぜ表示できるかもよくわかっていません。（これについてはおいおい学ぶとして、できればとっかかりのヒントをお願いします）あと、スクリプトが利かない場合の表示は、<NOSCRIPT>～</NOSCRIPT>で間に変わりのものを書けばいいのでしょうか。すいませんが、よろしくお願いします。
- ベストアンサー
- HTML
2箇所にランダムに広告を表示したい。
上手く行かないので質問させてください。ページの上下に広告をランダムで表示させたいのですが、どのようにやるのか分かりません。 1箇所だけ表示することはできましたが、2箇所表示させようとすると何も表示されない状態です。 ----　HTML　----- <html> <head> <script type="text/javascript" src="banner.js"></script> </head> <body onload="Banner()"> <div id="banner" align="center"></div> <br> 本文ゴニョゴニョ．．． <div id="banner" align="center"></div> <br> </body> </html> -----　banner.js　----- function Banner(){ var imgMax = 10; var imgRand = Math.floor(Math.random() * imgMax); switch (imgRand) { case 0: banner.innerHTML='広告その１<br>'; banner.innerHTML+='<a href="・・・" target="_blank"><img src="・・・"></a>'; break; ---　略　---- id="banner"が2つあるのは×というのは分かりますが(一つ消すと表示されるので)、こういう場合はどのように処理をしたほうが良いでしょうか。
- 締切済み
- JavaScript

複数のランダム表示について

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

複数のランダム表示について

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録