- ベストアンサー
javascript
画像がA,B,C,D 説明文が1,2,3,4とあったとき、 画像A,1 と B,2 をまず最初に表示して一定時間後 A,1 → C,3 B,2 → D,4 と 表示させてループさせることは 可能でしょうか？ ランダムなら何とかできたんですけど どうしてもうまくいきません。 お手数だとは思いますが、アドバイスお願いします。
- kotikaze6
- お礼率47% (46/96)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 単なるスワップでなく、ループという事で次のようなサンプルを用意していみました。 <html> <head> <title></title> <style type="text/css"> .group1{display:inline;} .group2{display:none;} .group3{display:none;} .group4{display:none;} </style> <script type="text/javascript"> function swapBlock(){ swapBlock.currentGroup++; if(swapBlock.currentGroup >4) swapBlock.currentGroup = 1; for(var i=0;i<document.styleSheets.length;i++){ if(document.styleSheets[i].disable) continue; var cssRule = (document.styleSheets[i].cssRules)? document.styleSheets[i].cssRules: document.styleSheets[i].rules; for(var j=0;j<cssRule.length;j++){ if(cssRule[j].selectorText == '.group'+swapBlock.currentGroup) { cssRule[j].style.display='inline'; } else if(cssRule[j].selectorText.match(/^\.group\d$/)){ cssRule[j].style.display='none'; } } } setTimeout(swapBlock,3000); } </script> </head> <body onload="swapBlock.currentGroup=1;setTimeout(swapBlock,3000)"> <!-- 以下の並び順や配置はご自由に、imgやspanでなくてもいいのでとにかくclassの付け方だけを注意 --> <img src="画像Ａ" alt="画像Ａ" class="group1"> <img src="画像Ｂ" alt="画像Ｂ" class="group1"> <img src="画像Ｃ" alt="画像Ｃ" class="group2"> <img src="画像Ｄ" alt="画像Ｄ" class="group2"> <img src="画像Ｅ" alt="画像Ｅ" class="group3"> <img src="画像Ｆ" alt="画像Ｆ" class="group3"> <img src="画像Ｇ" alt="画像Ｇ" class="group4"> <img src="画像Ｈ" alt="画像Ｈ" class="group4"> <span class="group1">テキストＡ</span> <span class="group1">テキストＢ</span> <span class="group2">テキストＣ</span> <span class="group2">テキストＤ</span> <span class="group3">テキストＥ</span> <span class="group3">テキストＦ</span> <span class="group4">テキストＧ</span> <span class="group4">テキストＨ</span> </body> </html>
その他の回答 (4)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞４枚の画像を順番に こんな感じとか？ <script language="javascript"><!-- setInterval("textch()",3000); i=0; TEXT = new Array(); IMAGE = new Image(); ALT = new Array(); TEXT = [ ["テキスト１"] , ["テキスト２"] , ["テキスト３"] , ["テキスト４"] , ["テキスト５"] , ["テキスト６"] , ["テキスト７"] , ["テキスト８"] ]; IMAGE = [ ["A.gif"] , ["C.gif"] , ["E.gif"] , ["G.gif"] , ["B.gif"] , ["D.gif"] , ["F.gif"] , ["H.gif"] ]; ALT = [ ["A"] , ["C"] , ["E"] , ["G"] , ["B"] , ["D"] , ["F"] , ["H"] ]; function textch() { i++; document.getElementById("text1").innerHTML = TEXT[i]; document.getElementById("image1").src = IMAGE[i]; document.getElementById("image1").alt = ALT[i]; document.getElementById("text2").innerHTML = TEXT[i+4]; document.getElementById("image2").src = IMAGE[i+4]; document.getElementById("image2").alt = ALT[i+4]; if(i == "3") i = -1; } // --></SCRIPT> <div id="text1">テキスト１</div> <img src="A.gif" id="image1" alt="A"> <div id="text2">テキスト5</div> <img src="B.gif" id="image2"alt="B"> テキスト文が長いとちょっと面倒臭そうですが・・・ 画像で作ってしまっているのであればTEXTの部分をIMAGEと同じように画像のパスを入れて document.getElementById("text1").innerHTML = TEXT[i]; <div id="text1">テキスト１</div> などをIMAGEのとおなじようにすればよいかと思います
お礼
こんばんは ソースを貼ったりしながら、何とか望むものができました！ お二人のソースは、全て書いてくれていて大変感謝しております。 ソースを眺めてるうちにわかってきたこともありました。 javascriptは、やはりプログラム言語なんだなと改めて思いました。 ありがとうございました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは やることはNo.2様とほぼ変わらないと思いますけど・・・ <style type="text/css"><!-- .block {display:block; } .none { display:none; } --></style> <script language="javascript"><!-- setInterval("textch()",3000); function textch() { for(i=0;i<4;i++) { h = document.getElementById("text"+i+""); h.className = (h.className == "block")?"none":"block"; } } //--></script> <div id="text0" class="block"><img src="A.gif" alt="A">テキスト１</div> <div id="text1" class="block"><img src="B.gif" alt="B">テキスト２</div> <div id="text2" class="none"><img src="C.gif" alt="C">テキスト３</div> <div id="text3" class="none"><img src="D.gif" alt="D">テキスト４</div> ↑の場合は別々に表示の場合、並列表示しているのならこんな感じでも出来ます <script language="javascript"><!-- setInterval("textch()",3000); function textch() { h0 = document.getElementById("text0"); h1 = document.getElementById("text1"); h0.style.display = (h0.style.display == "none")?"block":"none"; h1.style.display = (h1.style.display == "none")?"block":"none"; } //--></script> <div id="text0"> <div><img src="A.gif" alt="A">テキスト１</div> <div><img src="B.gif" alt="B">テキスト２</div> </div> <div id="text1" style="display:none;"> <div><img src="C.gif" alt="C">テキスト３</div> <div><img src="D.gif" alt="D">テキスト４</div> </div>
お礼
間違えました。４枚の画像を順番にでした。 AとB→CとD→EとF→GとH 上 IとJ→KとL→MとN→OとP 下 このようなイメージです。
補足
leap_dayさんありがとうございます。 function textch() { for(i=0;i<4;i++) { h = document.getElementById("text"+i+""); h.className = (h.className == "block")?"none":"block"; } ↑ やはり、この辺りをfor文でループさせてるのは、わかるんですが、理解しきれていません。せめて４つずつ２段で表示できるように今頑張っています。
- steel_gray
- ベストアンサー率66% (1052/1578)
質問の意図を取り違えているかもしれませんが、 次のサンプルの応用でできませんかね。 <html> <head> <title></title> <style type="text/css"> .show{display:block} .hidden{display:none;} </style> <script type="text/javascript"> function swapBlock(){ var objArray = document.getElementById('SAMPLE').getElementsByTagName('DIV'); for(var i=0;i<objArray.length;i++){ objArray[i].className = (objArray[i].className == 'show')?'hidden':'show'; } setTimeout(swapBlock,3000); } </script> </head> <body onload="setTimeout(swapBlock,3000)"> <div id="SAMPLE"> <div class="show"><img src="画像Ａ" alt="">テキスト１</div> <div class="show"><img src="画像Ｂ" alt="">テキスト２</div> <div class="hidden"><img src="画像Ｃ" alt="">テキスト３</div> <div class="hidden"><img src="画像Ｄ" alt="">テキスト４</div> </div> </body> </html>
補足
steel_grayさんのソースを参考に画像上２組、下２組までの表示には成功しました。ありがとうございます。 ただ、本当はもう少し画像を増やしたいので、A→B→C→Dでループのような・・・ 配列を使わなければならないと思いますが、当方JAVAを少し勉強したことがありますが、そのころから配列が苦手で・・ 実際のところは、テキストも画像ファイルで作ってしまったのですが。 自分でもいろいろ試してますが、これは苦戦しそうです。
- cieux
- ベストアンサー率22% (100/443)
私の記憶が確かなら、Javascriptでは前画面の情報を取得できないと思いますので、一定時間ということなので、その時間で2で割り切れたらABという組み合わせにするとか、そういう判断をするしかないんじゃないかと思います。
お礼
ありがとうございます。私は判断以前に知識が不足してるようです。。
お礼
２度も教えてもらい感謝しています。ありがとうございました。 おかげでできました。 ここで聞いて良かったです。