- ベストアンサー
更新ごとに重複しない画像を5枚表示
初心者です。よろしくお願い致します。 複数ページ存在するうちの、各ページを更新するごとにランダムに変わる、重複しない5枚の画像を表示させたいと思います。 今現在、サイト上に掲載されてあったJavaScriptのサンプルを自分なりに変更してテストしているのですが、「重複しない」というところで壁にぶち当たってしまっています。 下記が現在のスクリプトです。 <body> <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "アドレス"; jumpURL[1] = "アドレス jumpURL[2] = "アドレス"; jumpURL[3] = "アドレス"; jumpURL[4] = "アドレス"; jumpURL[5] = "アドレス"; jumpURL[6] = "アドレス"; jumpURL[7] = "アドレス"; imgURL[0] = "top_img01.jpg"; imgURL[1] = "top_img02.jpg"; imgURL[2] = "top_img03.jpg"; imgURL[3] = "top_img04.jpg"; imgURL[4] = "top_img05.jpg"; imgURL[5] = "top_img06.jpg"; imgURL[6] = "top_img07.jpg"; imgURL[7] = "top_img08.jpg"; a = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[a]+"'>"); document.write("<img src='"+imgURL[a]+"' border='0'><br>"); document.write("</a>"); b = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[b]+"'>"); document.write("<img src='"+imgURL[b]+"' border='0'><br>"); document.write("</a>"); c = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[c]+"'>"); document.write("<img src='"+imgURL[c]+"' border='0'><br>"); document.write("</a>"); d = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[d]+"'>"); document.write("<img src='"+imgURL[d]+"' border='0'><br>"); document.write("</a>"); e = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[e]+"'>"); document.write("<img src='"+imgURL[e]+"' border='0'><br>"); document.write("</a>"); // --></script> </body> 現在では、画像枚数が8枚ですが、4、50枚に増える予定です。 また、スクリプトを書きやすくするために画像ファイルの名前をどのように変更してもかまわないと思っています。 上記のスクリプトは5枚の画像が表示されることはされるのですが、更新してから表示するまでの待ち時間が長いのが気になるので、できれば、欲を言うならば、早く表示してくれるようなスクリプトをご伝授していただければと思います。 よろしくお願い致します。
- noragoro
- お礼率64% (11/17)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
シャッフルする部分と表示する部分をわけるとわかりやすい <head> <script> jumpURL =[ {url:"アドレスA",alt:"A",img:"top_img01.jpg"} ,{url:"アドレスB",alt:"B",img:"top_img02.jpg"} ,{url:"アドレスC",alt:"C",img:"top_img03.jpg"} ,{url:"アドレスD",alt:"D",img:"top_img04.jpg"} ,{url:"アドレスE",alt:"E",img:"top_img05.jpg"} ,{url:"アドレスF",alt:"F",img:"top_img06.jpg"} ,{url:"アドレスG",alt:"G",img:"top_img07.jpg"} ,{url:"アドレスH",alt:"H",img:"top_img08.jpg"} ]; jumpURL.shuffle=shuffle; jumpURL.shuffle(); function shuffle(){ var temp=0; for(var i=0;i<this.length -1 ;i++){ var num=Math.floor(Math.random()*(this.length-i)); temp=this[i]; this[i]=this[num+i]; this[num+i]=temp; } } </script> </head> <body> <script> for(var i=0;i<5;i++){ document.write("<a href='"+jumpURL[i].url+"'><img src='"+jumpURL[i].img+"' alt='"+jumpURL[i].alt+"' border='0'></a><br>"); } </script> </body>
その他の回答 (1)
<html> <body> <script> var url =[ 'http://www.0', 'http://www.1', 'http://www.2', 'http://www.3', 'http://www.4', 'http://www.5', 'http://www.6', 'http://www.7' ]; var imgfile =[ 'img0.gif','img1.jpg','img2.jpg','img3.jpg', 'img4.jpg','img5.jpg','img6.jpg','img7.jpg' ]; var n=5; var n2=imgfile.length; for(var i=0,f=[],bf=[];i<n;i++) { while(f[rd=Math.random()*n2|0]); f[rd]=1; document.write('<img src="'+imgfile[rd]+'" alt="'+imgfile[rd]+'" onClick="location.href=\''+url[rd]+'\'"><br>'); } </script> </body></html>
お礼
回答ありがとうございます！ いろんなやり方があって、とても勉強になりました(^^) お手間をおかけしました！
関連するQ&A
- バナーのランダム表示のリンクを別窓で開きたい
バナーのランダム表示は出来るのですが、それらを開くとき 別窓で開きたいのですが、どうしたら良いのでしょうか？ 下記が現在使用しているJavaScriptです。これに何かを足せば リンクを別窓で開けるのでしょうか？ <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "リンクURL0"; jumpURL[1] = "リンクURL1"; jumpURL[2] = "リンクURL2"; jumpURL[3] = "リンクURL3"; imgURL[0] = "画像URL0"; imgURL[1] = "画像URL1"; imgURL[2] = "画像URL2"; imgURL[3] = "画像URL3"; n = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[n]+"'>"); document.write("<img src='"+imgURL[n]+"' border='0'>"); document.write("</a>"); // --></script> 以上です。宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!-- var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>
- 締切済み
- 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
- 画像がうまく表示されないのですが
ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ１ <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ２ <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ１はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか？ 表示されないとしたらどのようにしたら表示されるものなのでしょうか？ タグ２はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか？
- ベストアンサー
- JavaScript
- javascriptで画像のランダム表示設定
いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 ３枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。
- ベストアンサー
- JavaScript
- 画像をランダムに
JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか？
- ベストアンサー
- JavaScript
- ランダム表示
某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横310Ｘ縦190と言う 表示画像サイズの指定の仕方が わかりません いろいろ 試したのですが 素人のため なかなか うまくいきません 下のスプリクトにどこにどのようなタグを入れていいのか教えてください 皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>
- ベストアンサー
- JavaScript
- Javascriptでランダムに画像を表示させる方法について
画像をランダムに表示させる為にalphaEDIT v2.0.3に以下のようなスクリプトを貼り付けました。 しかし表示させる画像の位置を動かすことができません。どうすればよいでしょうか？ グーグルやおしえてgooで検索しましたが、わかりませんでした。 どうかご教授おねがいします。m(_ _)m <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="test1.jpg"; ranimg[1]="test2.jpg"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>
- ベストアンサー
- HTML
- 画像のランダム表示について
ある方のスクリプトを参考にさせて頂いたのですが、 色々なサイトで調べてみると、どうも他にも色々な方法があるようで、迷っています。 私が書いたスクリプトは、以下の物なのですが、直した方が良い所や、または、お勧めの方法を教えてください。 <SCRIPT language=JavaScript> <!-- function randomimage() { rimage = Math.floor(Math.random() * 10); // if (rimage == 0) { img = "img/top/0.jpg" }; // if (rimage == 1) { img = "img/top/1.jpg" }; // if (rimage == 2) { img = "img/top/2.jpg" }; // if (rimage == 3) { img = "img/top/3.jpg" }; // if (rimage == 4) { img = "img/top/4.jpg" }; // if (rimage == 5) { img = "img/top/5.jpg" }; // if (rimage == 6) { img = "img/top/6.jpg" }; // if (rimage == 7) { img = "img/top/7.jpg" }; // if (rimage == 8) { img = "img/top/8.jpg" }; // if (rimage == 9) { img = "img/top/9.jpg" }; // tag1 = "<IMG SRC='" + img + "' border=0>"; }; // end--> </SCRIPT> <SCRIPT language=JavaScript> <!-- randomimage(); document.write(tag1); // end--> </SCRIPT> これを<BODY></BODY>の間に入れて表示させる物です。
- ベストアンサー
- JavaScript
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ 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
お礼
なるほど！for文でループさせればいいんですね！ わかりやすい回答をありがとうございました。 おかげで無事解決しました！