javascript

質問

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

回答No.3

leap_day

こんにちは

やることは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文でループさせてるのは、わかるんですが、理解しきれていません。せめて４つずつ２段で表示できるように今頑張っています。