JS：画像を繰り返しランダム読込すると途中で止まる

2014/09/23 16:36

このQ&Aのポイント

現在、ページの読み込み時にランダムで2枚の画像を読み込んで、loadのたびに違う画像が表示されるようにしています。しかし、リロードせずに繰り返し画像を切り替えるように変更したい場合、画像の切り替え8回目の切り替えあたりで停止してしまいます。
原因は不明ですが、初心者レベルでは解決策がわかりません。何か変数をクリアすれば問題が解決する可能性があります。このエラーの原因を知っている方がいれば教えてください。
画像の切り替えが止まる問題の解決策を教えてください。

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> ------------- よろしくお願いいたします。

ti_2003_3
お礼率57% (4/7)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2014/09/25 18:05 回答No.1

ざっと見ただけですが・・・ご質問のようなことが起こる可能性は、　img.splice(n,1); としているので、配列要素数が段々減少していって、空配列になった時点で「該当要素がない」というエラーになって止まっているのではないかと想像します。類似するエラーが出ていないでしょうか？全体で何をどうしたいのかよくわかりませんが、とりあえずそのあたりをチェックしてみてはいかがでしょうか。