- ベストアンサー
2枚1組の画像を1セットずつランダムに表示する方法
- Javascriptを使用して、2枚1組の画像を1セットずつランダムに表示する方法について教えてください。
- 現在、2枚1組の画像を2セットずつ表示しているソースコードがありますが、1セットずつ表示する方法が分かりません。
- さらに、「一定時間ごと」ではなく、「ページを読み込む度」に表示を変えたいです。変更するための書き方を教えてください。
- gizu33
- お礼率75% (3/4)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No2です。 ＞欲を言えば、IEで一瞬すべての画像が表示されてしまうことが、 ＞ちょっと気になりますが たしかにそうですね。 onload時（画面がレイアウトされてから）にスクリプトを実行しているので、その一瞬だけ表示されてしまいます。 もう少し早く消すようにスクリプトを変えてみましたが、あまり変わりはありませんでした。 画像の初期設定をCSSで非表示にしておけば、それよりは良くなると思います。 サンプルの場合だと .rand_1, .rand_2, .rand_A {display:none;} みたいな感じ。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
少し発想は違いますが… imgの中で「rand_」で始まるclass名が設定されたものを対象とし、同じclass名のものをセットとして処理します。 2枚1組でも、3枚1組でもかまいません。 どれか一組のみを表示し、残りは非表示となります。 以下、サンプルです。 <html> <head> <script type="text/javascript"> window.onload=function() { var nam={},elm=[];j=0; var e=document.getElementsByTagName('IMG'); for (var i=0; i<e.length; i++) { if (e[i].className.substr(0, 5)=='rand_'){ nam[e[i].className]=1; elm[j++]=e[i]; };} j=0; for (var ky in nam) j++; j=Math.floor(Math.random() * j); for (ky in nam) if (j--==0) break; for (i=0; i<elm.length; i++){ elm[i].style.display=(elm[i].className==ky)?'block':'none'; } } </script> </head> <body> <img class="rand_1" src="A.jpg"> <img class="rand_2" src="B.jpg"> <img class="rand_A" src="C.jpg"> <img class="rand_1" src="D.jpg"> <img class="rand_2" src="E.jpg"> </body> </html>
お礼
望んでいる動きになりました。 欲を言えば、IEで一瞬すべての画像が表示されてしまうことが、ちょっと気になりますが、ブラウザの問題かもしれません。 ありがとうございます！
- yambejp
- ベストアンサー率51% (3827/7415)
前回と絶対に違うものを表示するためには、前回の何を表示したか 覚えておかなくてはなりません。 そうなるとcookieなどの仕組みが必要になりますので、かなり面倒です 同じになる可能性もあるが、とりあえずランダムで表示されればいいや・・・ ということであれば、いまのフローに近いものでよいと思います。
補足
アドバイスありがとうございます。 後者の「同じになる可能性もあるが、とりあえずランダム表示させたい。」と考えています。
お礼
良くなりました！とても助かりました。 ありがとうございました。