「2枚1組の画像」3セットを1セットずつランダムで表示させたい。

解決済

質問者：gizu33
質問日時：2009/04/24 12:45
回答数：3件

Javascriptの書き方はよく分からない素人です。
いつもソースを探してきて使っているレベルです。
やりたい内容に似たソース（▼以下）を探してきたのですが、
もともと「2枚1組の画像」を2セットずつ表示させるもので、
変更の仕方が分からないので教えていただきたいです。

さらに、「一定時間ごと」ではなく、
「ページを読み込む度」に表示を変えたいです。
（この場合全く違う書き方をすることになるのでしょうか？）

よろしくお願いします。

▼ここから－－－－－－－－－－－－－－－－－－－
<script language="javascript"></script>

<div id="text0"><img src="images/a.jpg" alt="A" width="410" height="168"><img src="images/b.jpg" alt="B" width="470" height="168"></div>
<div id="text1"><img src="images/c.jpg" alt="C" width="410" height="168"><img src="images/d.jpg" alt="D" width="470" height="168"></div>
<div id="text2"><img src="images/e.jpg" alt="E" width="410" height="168"><img src="images/f.jpg" alt="F" width="470" height="168"></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2009/04/24 19:40

No2です。

＞欲を言えば、IEで一瞬すべての画像が表示されてしまうことが、
＞ちょっと気になりますが
たしかにそうですね。　onload時（画面がレイアウトされてから）にスクリプトを実行しているので、その一瞬だけ表示されてしまいます。
もう少し早く消すようにスクリプトを変えてみましたが、あまり変わりはありませんでした。

画像の初期設定をCSSで非表示にしておけば、それよりは良くなると思います。
サンプルの場合だと
　.rand_1, .rand_2, .rand_A {display:none;}
みたいな感じ。

- 0
- 件

通報する

この回答へのお礼

良くなりました！とても助かりました。
ありがとうございました。

通報する

お礼日時：2009/04/26 00:37

No.2

回答者： fujillin
回答日時：2009/04/24 15:34

少し発想は違いますが…

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>