imgとaudioをセットで重複なくランダム切替え

前へ 次へ
このQ&Aのポイント
  • HTMLのページにランダムに切り替える画像とMP3をセットで配置したいです。
  • 画像をクリックするたびに、重複しないようにランダムに別の画像とMP3に切り替えたいです。
  • 現在の方法では、切り替えまではできるものの、同じ画像やMP3が続いてしまうことがあります。
回答を見る
  • ベストアンサー

imgとaudioをセットで重複なくランダム切替え

以下のHTMLのように 一つのページに画像に合わせたaudioボタンを配置して 画像をクリックするたびに、9個くらいの画像とmp3をセットで ランダムに切り替えをしたいのですが以下のものだと 切り替えまではできるのですが、同じものが続いてしまったりします。 9個ランダムに切り替わるまでは重複無しで 9個終わったら、また最初からランダムに並び変えるようにしたいです。 どのように、組めば可能でしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function(){ var maxNum = 9, // 最大枚数 rdm = Math.floor(Math.random()*(maxNum))+1; $('#randomShow').attr('src', 'image/cat' + rdm + '.png'); $('#randomSound').attr('src', 'sound/cat' + rdm + '.mp3'); }); </script> </head> <body> <img src="image/cat1.png" id="randomShow" onclick="location.reload(true);"> <audio src="sound/cat1.mp3" id="randomSound" controls></audio> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.7

<html> <スクリプト> $(function(){ var q9741487=function(img,snd,max) { this.id_img=img; this.id_snd=snd; this.table=new Array(max); this.maxNum=max; this.index=0; this.ctor(); } q9741487.prototype.listner=function(event) { event.data.update(); } q9741487.prototype.ctor=function() { /* デバッグ（不要なら削除を）*/ console.log("ctor"); for (var i=0;i<this.maxNum;i++) { this.table[i]=i+1; } // this.index=0; this.shuffle(-1); this.update(); $('#randomShow').click(this,this.listner); } q9741487.prototype.shuffle=function(first) { while(1) { for (var i=0;i<this.maxNum;i++) { var s=Math.floor(Math.random()*(this.maxNum)); var t=Math.floor(Math.random()*(this.maxNum)); var tmp=this.table[s];this.table[s]=this.table[t];this.table[t]=tmp; } /* 今現在再生中物が先頭に来たら、やり直す */ if (this.table[0]!=first) break; } /* デバッグ（不要なら削除を）*/ for (var i=0,out="";i<this.maxNum;i++) out+=this.table[i]+" ";console.log("shuffle="+out); } q9741487.prototype.update=function() { /* デバッグ（不要なら削除を）*/ console.log("index=" + this.index + " set=" + this.table[this.index]); $('#randomShow').attr('src', 'image/cat' + this.table[this.index] + '.png'); $('#randomSound').attr('src', 'sound/cat' + this.table[this.index] + '.mp3'); this.index++; if (this.index>this.maxNum-1) { this.shuffle(this.table[this.maxNum-1]); this.index=0; } } /* パラメタには、IMGと、AUDIOにつけたIDと、最大個数を書いてください */ var obj=new q9741487("randomShow","randomSound",9); }); </スクリプト> <body> <!-- 末尾のonclickはもはや、いりません --> <img src="image/cat1.png" id="randomShow"> <audio src="sound/cat1.mp3" id="randomSound" controls></audio> </body> </html> ------------------ scriptがOKWAVEの禁止ワードになることがあるので、 "スクリプト"って書いてますのでそこは、割愛してください。 また、他の表示物より先にこれが、実行されるとまずい場合は、 ロード完了後に、 var obj=new q9741487("randomShow","randomSound",9); こいつを実体化させればOKです。

MasayaKakiuchi
質問者

お礼

ご丁寧な回答ありがとうございました。 すごく助かりました！！

その他の回答 (7)

回答No.8

実行時の、デベロッパー画面も添付しておきます。 IDでリスナー分離をしてるので、 同じようなボタンを何個でも、追加できますので。。 後は、すきに拡張してみてもらえたらと思います。 （ついでに、どこでなにしてるか？なんてのも参考にしてもらえたらと 　思いますが、そこはお任せします） あまり、ラベル増やすのも嫌だったので、 prototypeでまとめておきましたので。 とりあえず、先ほどのやつ、そのまま入れるだけで、 質問者さんの、希望は完全に満たしてますが。 さらに拡張したい？ってことがあれば、声をかけてもらえたらと 思います。 以上～私からの回答でした。

画像を拡大する
回答No.6

>画像をクリックして次の画像・音のセットに切り替えるのが >いろいろとやってみたのですがうまくいきませんでした。。 onclick="location.reload(true);" だからです。リロードせず、自己書き換えにすればOKですよ。 それと、2セット目の先頭が、1セット目の最後と同じにならないようにする パッチも意味があるので、そこも、忘れないようになれば、 完成じゃないかとは思います。 ついでに言えば、再生をフックして再生が終わったら次に自動遷移？ もありかもですが、そこまでは、今回言われてないので、 拡張してみてください。 あとで、自己書き換えのフック式で作りますので、お待ちを！ "#ID"　←これ自体にクリックリスナーを入れればリロードしなくても 行けますんで。

回答No.5

ともあれ、やってみて、問題があれば、対応できるものは、 回答できると思うので、実際やってみて、問題点を 書いてもらえたらと思います！。 気楽にいきましょ！

  • asciiz
  • ベストアンサー率70% (6644/9412)
回答No.4

＞同じものが続いてしまったりします。 それも含めて「乱数」というものですからねえ。 もし、「同じ数字が続かない乱数」というものがあったとすると、「サイコロの目(1～6)を当てる」というゲームで、1が出た場合、次は1以外に賭けると、1/5の確率で当てられることになります(本来は1/6であるはず)。 ＞9個終わったら、また最初からランダムに その方式では、1セット目「123456789」と2セット目「987654321」となった時に、同じ番号が続いてしまったりします。別の方法を考えなければいけません。 そしてそもそも大きく変えなければいけないのが、「前回(以前)の状態を記録しなければいけない」というところです。 現在は、毎回乱数で決めて終わり、なので何も記録する必要はありませんが、 HTTPでは前回の表示と今回の表示、そして次の表示の間に関連性はなく、リロードしたらJavaScript変数はすべて初期化されてしまいます。 データをサーバで保持するかクライアントで保持するか、というところなのですが、今回はクライアント側、すなわちブラウザのCookieを使ってみます。 生のCookieを扱うのは、次のページの通り少々面倒なのですが、 ＞サイトの情報を自由に処理! JavaScriptでcookieを扱う方法を徹底解説 ＞https://www.sejuku.net/blog/28696 ご質問にjqueryという文字も見えるので、jQuery.cookieを使ってみましょう。 ＞jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ＞https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html 方式としては、超単純に、「前回とかぶったら乱数を引き直す」としてみました。 引けた乱数を クッキー'RDM'の値として保存し、次回に使います。 ということで、こんな感じになりました。 あ、Cookieはサーバ通信しないと更新されないので、ローカルhtml表示ではテストにならないことにご注意を。 ----以下HTML---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script> $(function(){ var maxNum = 9; // 最大枚数 var prev = Number($.cookie('RDM')); // Cookie取り出し※Cookieは文字列 if (isNaN(prev)) prev = 0; // RDMが未定義または数字以外だったときNaNになる var rdm = prev; while (rdm == prev) {rdm = Math.floor(Math.random()*(maxNum))+1}; $.cookie('RDM', String(rdm)); // Cookie保存 $('#randomShow').attr('src', 'image/cat' + rdm + '.png'); $('#randomSound').attr('src', 'sound/cat' + rdm + '.mp3'); }); </script> </head> <body> <img src="image/cat1.png" id="randomShow" onclick="location.reload(true);"> <audio src="sound/cat1.mp3" id="randomSound" controls></audio> </body> </html>

回答No.3

onclick="location.reload(true);" ↑これだと、初期化されるので、 今のままのATTR書き換えメソッドのままで 関数にしてそれを呼ぶように変更してください。

MasayaKakiuchi
質問者

補足

教えてもらったソースで最初の表示の時にランダムに変わるようにはできました。 画像をクリックして次の画像・音のセットに切り替えるのが いろいろとやってみたのですがうまくいきませんでした。。 ちゃんとした知識がなく作っているので基本的な質問かもしれませんが 教えていただけますでしょうか。

回答No.2

>9個ランダムに切り替わるまでは重複無しで >9個終わったら、また最初からランダムに並び変えるようにしたいです。 この時の「２セット目」では、配列番号８を維持させてください。 例として、 12345678 が初期配置だったとします。 ２回目に再シャッフル後 81234567 が初期配置になったとすると、 「最後の番号が次のシャッフル時の先頭に来てしまうため、重複となる」 為です。 なので、２度目のシャッフル時に最後の位置をキープすることで 「それ以外をソートするため、希望の処理になる」 という具合です。

回答No.1

var maxNum = 9; // 最大枚数 var table=new Array(maxNum); for (var i=0;i<maxNum;i++) { table[i]=i+1; } for (var i=0;i<maxNum;i++) { var s=Math.floor(Math.random()*(maxNum)); var t=Math.floor(Math.random()*(maxNum)); var tmp=table[s];table[s]=table[t];table[t]=tmp; } /* 試しに画面に表示 */ for (var i=0;i<maxNum;i++) { document.write(table[i]); } ほい！ 2種類くらいアルゴリズムはありますが、 シンプルなのはこの辺かな。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • <img src"○.jpg">の○をランダムに！

    1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、 それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、 http://asamuzak.jp/html/302を参考にして、 2枚目からランダムにフェードインすることはできました。 しかし、1枚目が必ず同じ画像が表示されてしまいます。 body内の<img src"1.jpg" id=""> の部分が表示される1枚目のようです。 1.jpgを2.jpgにすると2.jpgが最初に表示されます。 1枚目からランダムにフェードインするものを作るには、 この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id=""> にすればいいのでは？　と思いました。 自分が考えたコードは、 下記コードの場合の動作は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script language="JavaScript"> <!-- var n = Math.floor((Math.random() * 29))+1; //--> </script> </head> <body> <img src="../images/1.jpg" /> </body> </html> 1.jpgが毎回必ず表示されます。 ランダムな整数を取得できるJavaScriptを作り、 var n = Math.floor((Math.random() * 29))+1; その整数を上記コードの <body> <img src="../images/1.jpg" /> </body> の部分を <body> <img src="../images/n.jpg" /> </body> とvar nを入れてやれば 1～30のランダムな整数が入って ページを更新するたびに画像が変わると考えました。 <img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、 どのようにしたらいいのでしょうか？　よろしくお願いします。

  • JavaScriptで数値をimgに設定する

    JavaScriptで　下記のソースにてランダムで出した数値を htmlの　width="" height=""に　設定するには　どのようにすればよいのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <script> var width = Math.floor(Math.random() * 400) + 1; var height = Math.floor(Math.random() * 400) + 1; </script> <img src="hoge.jpg" alt="" width="" height=""> </body> </html>

  • 画像をランダムにスクリプト

    ホームページを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> 宜しくお願いします。

  • 任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？

    任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？ よろしくお願い致します。 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>

  • スライド写真で２、３枚目をランダムで表示させるには

    bgSwitcherを使用してフェードインアウトするスライドショーを作りました。 [A固定]→[Bランダム]→[Bランダム]→[C固定] １枚目、４枚目は指定画像に差替え表示できていますが、 ２枚目、３枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。 【実現したいこと】 ●imgBをランダム読み込みし、２枚目、３枚目で同じ画像が選ばれないようにしたい ●2巡目以降も、再生のたびにランダム処理を実施する どなたか、上記のものが実現できるように出来ないものでしょうか。 どうぞよろしくお願いいたします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.bgSwitcher.js" type="text/javascript"></script> <script language="javascript"> <!-- // JavaScript Document var imgA = ["images-top/A.jpg"], imgC = ["images-top/C.jpg"]; imgB = new Array(); imgB[0] = "images-top/B1.jpg"; imgB[1] = "images-top/B2.jpg"; imgB[2] = "images-top/B3.jpg"; imgB[3] = "images-top/B4.jpg"; imgB[4] = "images-top/B5.jpg"; n = Math.floor(Math.random()*imgB.length); jQuery(function($) { $('#bgSwitch-fadeOut').bgSwitcher({ images: [imgA, imgB[n], imgB[n], imgC], interval: 1000, fadeSpeed: 1000, }, true); }) --> </script> <style type="text/css"> .bg { width: 160px; height: 160px; padding: 20px; line-height: 1.6; } </style> </head> <body> <div> <div id="bgSwitch-fadeOut" class="bg"> <p>テキスト</p> </div> </div> </body> </html>

  • javascriptで画像をランダム表示させたい

    javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>

  • ランダム画像＆マウスオーバーで画像切り替え

    こんばんは。 下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> どなたかご教授頂けると助かります。 よろしくおねがいいたします。

  • ランダムなフェードインを作りたいです。

    jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>

    • ベストアンサー
    • AJAX
  • スライドショーにフェード効果と再ランダム表示を…

    前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが 策が尽きてしまいました。皆様のお力をお借りできないでしょうか。 【※現在の状況】 ・[A]→[B1]→[B2]→[C]の順番で再生 ・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。 上記にさらに下記機能をプラスしたいと思っております。 【実現したいこと】 ・クロスフェード（またはフェードイン、アウト）を実装したい。 ・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。 形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。 どうか助けて頂けないでしょうか。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDESHOW</title> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- var imgA = ["images/A.jpg"], 　　 imgB = new Array(); imgB[0] = "images/B1.jpg"; imgB[1] = "images/B2.jpg"; imgB[2] = "images/B3.jpg"; imgB[3] = "images/B4.jpg"; imgB[4] = "images/B5.jpg"; var n1 = Math.floor(Math.random()*imgB.length); while ( true ) { var n2 = Math.floor(Math.random()*imgB.length); // n1とn2がちがっていればループ終了　同じの場合はもう一度ランダム実行 if ( n1 != n2 ) break; } 　　imgC = ["images/C.jpg"]; cnt = 0; interval = 1000; function img_slide(){ //以下枚数分繰り返し if(cnt==0) {document.show.src=imgA; cnt++; }else if(cnt==1) {document.show.src=imgB[n1]; cnt++; }else if(cnt==2) {document.show.src=imgB[n2]; cnt++; }else if(cnt==3) {document.show.src=imgC; cnt=0; } } function img_move(){ img_slide(); timerID = setTimeout("img_move()",interval); } // --> </SCRIPT> </head> <body onload="img_move()"> <div> <img src="images/A.jpg" name="show" width="300" height="250" > </div> </body> </html>

  • 画像のランダム表示

    初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する