• ベストアンサー

javascript

画像がA,B,C,D　説明文が1,2,3,4とあったとき、 画像A,1　と　B,2　をまず最初に表示して一定時間後 A,1 →　C,3　B,2　→　D,4　と　表示させてループさせることは 可能でしょうか？　ランダムなら何とかできたんですけど どうしてもうまくいきません。 お手数だとは思いますが、アドバイスお願いします。

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

#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>

kotikaze6
質問者

お礼

２度も教えてもらい感謝しています。ありがとうございました。 おかげでできました。　ここで聞いて良かったです。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.5

こんにちは ＞４枚の画像を順番に こんな感じとか？ <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のとおなじようにすればよいかと思います

kotikaze6
質問者

お礼

こんばんは ソースを貼ったりしながら、何とか望むものができました！ お二人のソースは、全て書いてくれていて大変感謝しております。 ソースを眺めてるうちにわかってきたこともありました。 javascriptは、やはりプログラム言語なんだなと改めて思いました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

こんにちは やることは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>

kotikaze6
質問者

お礼

間違えました。４枚の画像を順番にでした。 AとB→CとD→EとF→GとH　上 IとJ→KとL→MとN→OとP　下 このようなイメージです。

kotikaze6
質問者

補足

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)
回答No.2

質問の意図を取り違えているかもしれませんが、 次のサンプルの応用でできませんかね。 <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>

kotikaze6
質問者

補足

steel_grayさんのソースを参考に画像上２組、下２組までの表示には成功しました。ありがとうございます。 ただ、本当はもう少し画像を増やしたいので、A→B→C→Dでループのような・・・　配列を使わなければならないと思いますが、当方JAVAを少し勉強したことがありますが、そのころから配列が苦手で・・ 実際のところは、テキストも画像ファイルで作ってしまったのですが。 自分でもいろいろ試してますが、これは苦戦しそうです。

全文を見る
すると、全ての回答が全文表示されます。
  • cieux
  • ベストアンサー率22% (100/443)
回答No.1

私の記憶が確かなら、Javascriptでは前画面の情報を取得できないと思いますので、一定時間ということなので、その時間で2で割り切れたらABという組み合わせにするとか、そういう判断をするしかないんじゃないかと思います。

kotikaze6
質問者

お礼

ありがとうございます。私は判断以前に知識が不足してるようです。。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript ランダム表示

    ２回目になります。前回はお世話になりました。 忙しなく、気は引けるのですが、是非教えてもらいたいことがあり質問させていただきます。 やりたいことは、画像が６枚、６枚とあって 上下に２組ずつ表示させます。ただしランダムとはいえ、画像の組み合わせは決まっており、A+B　C+D　というのは固定という前提で。 画面のイメージとしては 上　画像A　+　画像B 下　画像C　+　画像D これを、一定時間ごとに　 上　画像E　+　画像F　→　画像A　+　画像B（ランダム） 下　画像G　+　画像H　→　画像I　+　画像J (ランダム） E+FとかC+Dは固定ですが、上下で時間ごとに切り替わった時に表示される画像はランダムにしたいのです。A+BやL+Mなどどちらかでるかはランダムといった感じ。 順番どおり、表示させるのは成功したのですが、こちらも是非表現したく、質問させてもらいました。どうか宜しくお願いします。

  • ランダムに画像と文章を表示

    バナーをクリックするたびに、ポップアップでランダムに画像と説明文を表示させたいのです。 A.B.Cの画像とa.b.cの文章があって、画像と文章の組み合わせは変えたく無いのです。 A画像＋a文章、B画像＋b文章、C画像＋c文章の組み合わせをランダムに表示させたいのですが、どのようにすればよいのでしょうか？

  • javascript についてご教示くださいませ。

    javascript についてご教示くださいませ。 初心者でございます。 あるサイトでjavascript の見本がありました。 表示されているソースではボタンをおした時に 1つの文字がランダムに表示されます。 これを3✕5(下記のように表示させたい) A B B C D A A A A C B A D D C 乱数で表示させるにはどのように変更したら良いでしょうか？ 自分で色々勉強しろというご意見もあると思いますが何卒宜しくお願いいたします。 <form><input type="button" value="クリック" onClick="omikuji()"></form> <script type="text/javascript"> function omikuji() { rand = Math.floor(Math.random()*5); if (rand == 0) msg = "A"; if (rand == 1) msg = "B"; if (rand == 2) msg = "C"; if (rand == 3) msg = "D"; if (rand == 4) msg = "E"; alert(msg); } </script>

  • 画像をランダムに表示させたい（ＶＢ6.0）

    A、B、C、D、E、Fの６枚の画像を用意して ボタンを押すごとにA、B、Cの3枚の画像をランダムに表示させる方法を教えて下さい。 また、 Aが表示されたとき、キーボードの「Ａ」を押すとDを表示 Bが表示されたとき、キーボードの「Ｂ」を押すとEを表示 Cが表示されたとき、キーボードの「Ｃ」を押すとFを表示 としたいのですが・・・。 どなたかご教授お願いします。

  • ちょっと変わったスライドショーを実現したいです

    ちょっと変わったスライドショーを作りたいのですが、 自分の技量では仕組みを考えつくことが出来ず、困っております。 どなたか下記のものが出来る仕組みをお教え頂けないでしょうか。 合計６枚のスライドショーです。 Aパート ・１枚目　固定でA.jpgを表示 ・２枚目、３枚目はB-1、B-2、B-3、B-4.jpgから２枚をランダムに表示 Bパート ・4枚目　固定でC.jpgを表示 ・5枚目、6枚目はD-1、D-2、D-3、D-4.jpgから２枚をランダムに表示 ※Bパートの6枚目のあとはAパートの１枚目に戻りリピート再生です。 ※2巡目以降、ランダム表示で1巡目と同じ画像が出ても構いません。 ※jquery-cycleのように指定した時間で画像を切り替え（切り替わり時にフェードイン、フェードアウト） 言葉にするのが難しいので、図をかいてみました。 なんとも手間がかかる仕様で申し訳ございません。 どなたかご教授をお願い致します！！

  • ランダム画像を２枚一組で並べたい

    以下の点について知りたかったので書き込みします。 １０個の画像を２枚一組でランダムに整列させたいです。 ■Ｂ　□Ｂ ■Ａ　□Ａ ■Ｃ　□Ｃ ■Ｅ　□Ｅ ■Ｄ　□Ｄ 図のようにランダムにならんだ■に対して、それとセットになっている□が横に並ぶようにしたいです。 画像は外部読み込みにするつもりです。 似たような質問・解答されているものもありますが、一枚づつ表示というものが多く、それを全部表示させるものへの応用の仕方が判りませんでした。 FLASHMX2004、ActionScript2.0です。 宜しくお願いいたします。

  • Javascriptで時刻に応じて画像を変えることはgetHoursや

    Javascriptで時刻に応じて画像を変えることはgetHoursやifなどを使って実現できますが、その変化の種類を多くしたいと思っています。しかしながら、変化の種類を多くするとif文がだらだらと続くことになり、非常にややこしくなります。 そこで、 （時刻,画像名） 1200,a 1204,b 1209,c 1211,b 1215,d 1234,a のように簡略的なものを書くだけで「時刻」になったら「画像名」の画像に切り替わる、といったことはできますか。もちろん書式は上のようなものでなくてもかまいません。簡略化できれば何でもよいです。

  • 【ランダムバナー】各バナーごとに表示時間を設定

    一定時間ごとにランダムに、 バナーとそのリンク先を切り替え表示したいのですが 例えばＡ・Ｂ・Ｃと３つのバナーを表示するのに Ａは１０秒 Ｂは５秒 Ｃは１５秒　表示といったように、 それぞれのバナーで表示時間を変えたい場合には どうしたらよいのでしょうか？ 均等な時間表示方法しか、参考ページを見つけられずに困っております。。。 すみませんが、よろしくお願いいたします！

  • これはJavaScriptでどう解釈されている？

    下記のように書いたらエラーとならず c と表示されました どのような原理でcと表示されるのでしょうか？ const d=("a","b","c"); console.log(d);

  • javascriptでの画像表示について

    javascript初心者です。 画像を一つランダムに表示させ、それをクリックしたらその画像は隠れ、新たに複数枚画像を表示させるプログラムを作りました。 これに、最初の画像をクリックしたらストップウォッチを表示し起動させ、新たに表示された複数枚の画像の中から最初(クリック前)の画像と同じものをクリックしたらストップウォッチが止めるようにしたいです。 jqueryは使用していません。どうすればよいかアドバイス頂けませんでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する