画像をフォルダから自動読み込みする方法
- 画像をフォルダから自動で読み込み、ランダムに背景に表示させる方法を紹介します。
- スクリプトを使用して、指定したフォルダ内の画像をランダムに選んで背景に表示させることができます。
- フォルダ内の画像を自動的に読み込むことで、手動で画像ファイルのパスを指定する手間を省くことができます。
- ベストアンサー
画像をフォルダから自動読み込み。
画像をフォルダから自動で読み込み、ランダムに背景に読み込ませたいのです。 ランダムに背景に表示させる方法は以下のスクリプトで達成済みです。 <script type="text/javascript"> var imglst= new Array( "haikei/bg001.jpg", "haikei/bg002.jpg", "haikei/bg003.jpg" ); function randombg(){ var imgnum=Math.floor(Math.random()*imglst.length); document.body.style.backgroundImage="url("+imglst[imgnum]+")"; } </script> <body onload="randombg();"> 上のスクリプトのnew Array()でいちいち画像のフォルダ名/画像名.jpgとかを記述するのではなく、自動でhaikeiという名前のフォルダからやりたいのです。画像数は100枚以上あるのでいちいち書くとファイルサイズも肥大化するので。
- smwithdm
- お礼率34% (17/49)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ランダム要素の画像パスは、全て「"haikei/bg（連番）.jpg"」ですか？ haikei2/bg（連番）.jpgとか、haikei/bg（連番）_a.jpgなどの画像名が含まれないのなら、 以下の方法でどうでしょうか。 function randombg(){ var imgnum=Math.floor(Math.random()*画像の枚数); document.body.style.backgroundImage="url('haikei/bg"+imgnum+".jpg')"; }
関連するQ&A
- 背景画像のランダム表示
お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>
- ベストアンサー
- PHP
- JS：画像を繰り返しランダム読込すると途中で止まる
現状は、ページの読み込み時にランダムで2枚の画像を読み込んで、loadのたびに違う画像が表示されるようにしています。 それをリロードせずに繰り返し画像を切り変えるように変更したく下記のように「setTimeout("getImg()",1000); 」を追加したところ、画像の切り替え8回目の切り替えあたりで止まってしまいます。（その際、2枚の画像が同じ画像になります。毎回同じ画像でなるわけではない） 変数か何かをクリアすればいいような気はするのですが、初心者レベルのためわかりませんでした。 原因わかる方いましたらご教示頂ければ幸いです。 javascript：img1111.js ------------------------ function getImg(str){ //ランダム function randNum(){ var randNum = Math.floor(Math.random()*img.length); return randNum; } //表示処理 if(str=="wide"){ var n = randNum(); setIMG = 'url(images/'+img[n][1]+')'; document.getElementById('inner_recomend').style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById('right_contents_rec').innerHTML = setURL; }else{ //画像とURL取得 function imgSet(id,n){ var setIMG = 'url(images/'+img[n][1]+')'; document.getElementById(id).style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById(id).innerHTML = setURL; } var n = randNum(); imgSet('right_contents_rec1',n); img.splice(n,1); var nn = randNum(); imgSet('right_contents_rec2',nn); } //次のタイマー呼びだし setTimeout("getImg()",1000); } ------------- htmlは下記 ------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="swap"> <div id="select01"> <div id="inner_recomend"> <div id="right_contents_rec1"></div> <div id="right_contents_rec2"></div> </div> </div> </div> </body> <script type="text/javascript" src="img1111.js"></script> <script type="text/javascript"> var img = new Array(); //画像リストの設定 ('URL','画像ファイル名') img[0] = Array('http://www.000.co.jp/','15961.jpg'); img[1] = Array('http://www.000.co.jp/','15962.jpg'); img[2] = Array('http://www.000.co.jp/','15963.jpg'); img[3] = Array('http://www.000.co.jp/','15964.jpg'); img[4] = Array('http://www.000.co.jp/','15965.jpg'); img[5] = Array('http://www.000.co.jp/','15966.jpg'); img[6] = Array('http://www.000.co.jp/','15967.jpg'); img[7] = Array('http://www.000.co.jp/','15968.jpg'); img[8] = Array('http://www.000.co.jp/','15969.jpg'); // getImg(); </script> </html> ------------- よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ランダム表示に加えwidthをブラウザに合わしたい
ホームページを作成しています。 ５枚の画像からランダムで背景に表示する処理に加えて、選ばれた画像のwidthをブラウザに合わせて拡大・縮小したいです。 以下ソースのランダム表示の処理に加えて、ブラウザに合わせて画像を拡大・縮小して表示する方法を教えて下さい。 よろしくお願いします。 <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/ti1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n]; </SCRIPT>
- ベストアンサー
- JavaScript
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
- 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
- 画像をランダムにスクリプト
ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。
- 締切済み
- HTML
- JAVASCRIPTについて教えてほしいのですが
<script language="JavaScript"> var imglist = new Array( "top_pic.jpg", "top_pic2.jpg", "top_pic3.jpg", "top_pic4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> ・・・・という画像をランダムに表示するスクリプトなんですが、 この画像を表示する際のオプション？みたいなのは何処に記入すればよいのでしょうか？ align="right"や、width="50%" みたいなやつです。 よろしくお願いします
- ベストアンサー
- ブログ
- JABASCRIPTなんですが・・・
<script language="JavaScript"> var imglist = new Array( "top_pic.jpg", "top_pic2.jpg", "top_pic3.jpg", "top_pic4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> ・・・・という画像をランダムに表示するスクリプトなんですが、 この画像を表示する際のオプション？みたいなのは何処に記入すればよいのでしょうか？ align="right"や、width="50%" みたいなやつです。 よろしくお願いします
- 締切済み
- ブログ
- 任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？ よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。 この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。 例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。 いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。 お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascript 画像切り替え ランダム 順番
インラインフレーム内のランダムな画像切り替えはできたのですが、順番に切り替えていくというのが出来ません。。。 ランダムソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=Math.floor((Math.random()*100))%imglist.length; var output="<IMG src=images/randomimg/"+imglist[selectnum]+">" ; document.write(output); 順番ソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=imglist.length-1; var i=0; function forward() { i=selectnum--; var output="<IMG src=images/randomimg/"+imglist[i]+">" ; document.write(output); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。 どなたか解決方法よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
なんか調べて適当にやっていたらできました！ function reFresh() { location.reload(true); } window.setInterval("reFresh()",1000); currentdate=new Date(); // var imgnum=Math.floor(currentdate.getSeconds()/((60/999)+1)); var imgnum=Math.floor(Math.random()*999)+1; // var imgnum="11"; imgnum=""+imgnum; if (imgnum.length=="1"){ document.writeln("imgnum = "+imgnum); document.writeln("<hr />ONE DIGIT<hr />"); document.writeln("imgnum.length = "+imgnum.length); document.writeln("<hr />"); document.writeln("00"+imgnum); } if (imgnum.length=="2"){ document.writeln("imgnum = "+imgnum); document.writeln("<hr />TWO DIGIT<hr />"); document.writeln("imgnum.length = "+imgnum.length); document.writeln("<hr />"); document.writeln("0"+imgnum); } if (imgnum.length=="3"){ document.writeln("imgnum = "+imgnum); document.writeln("<hr />THREE DIGIT<hr />"); document.writeln("imgnum.length = "+imgnum.length); document.writeln("<hr />"); document.writeln(""+imgnum); } </script>
補足
なるほど、難しく考えていました。 ランダム要素の画像パスは全て「"haikei/bg（連番）.jpg"」です。 しかし、連番は bg001.jpg, bg002.jpg ～bg010.jpg ～bg100.jpg となっています。bg1.jpg, bg2.jpg, ～bg10.jpg, ～bg100.jpgとなってもいいのですが管理の為に001,010,100となっています。 このような場合はどのようにすればよろしいのでしょうか？