T
op
S
CRIPTS
AUTO
M
OBILES
D
OWNLOADS
L
INK
B
BS
A
BOUT
F
EEDBACK
スライド効果付き紙芝居
説明
一定間隔でブロック要素を切り替えています。文字でも画像でも、いっしょに切り替えることができます。
サンプル
GO!
STOP
ソースコード
HEADに記述
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- NN4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appName).indexOf("Netscape") != -1); IE4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1); span = new Array(); //■表示する文字列(タグも可) span[0] = "<div style='background-color:#0000ff;width:300px;height:200px;font-size:150px;font-color:#ffffff;text-align:center'>1</div>"; span[1] = "<div style='background-color:#00ff00;width:300px;height:200px;font-size:150px;font-color:#ffffff;text-align:center'>2</div>"; span[2] = "<div style='background-color:#ff0000;width:300px;height:200px;font-size:150px;font-color:#ffffff;text-align:center'>3</div>"; span[3] = "<div style='background-color:#550099;width:300px;height:200px;font-size:150px;font-color:#ffffff;text-align:center'><img src='atlantic.jpg'></div>"; span[4] = "<div style='background-color:#0000ff;width:300px;height:200px;font-size:150px;font-color:#ffffff;text-align:center'><img src='talbot.jpg'></div>"; span[5] = "<div style='background-color:#ffff00;width:300px;height:200px;font-size:150px;font-color:#000000;text-align:center'>6</div>"; span[6] = "<div style='background-color:#ff00ff;width:300px;height:200px;font-size:150px;font-color:#000000;text-align:center'>7</div>"; span[7] = "<div style='background-color:#00ffff;width:300px;height:200px;font-size:150px;font-color:#000000;text-align:center'>8</div>"; span[8] = "<div style='background-color:#ff00ff;width:300px;height:200px;font-size:25px ;font-color:#000000;text-align:center'>9</div>"; span[9] = "<div style='background-color:#ffffff;width:300px;height:200px;font-size:150px;font-color:#000000;text-align:center'>10</div>"; i = 0; spd = 1000; //■表示する間隔(1/1000秒単位) Trans = 23; //■スライドの仕方。1-22まであり、23を指定すればランダム。 Time = 1; //■切り替わる時間(秒) tID = 0; function chgDvi1() { if(NN4 == true){ document.layers['div1'].document.write(span[i]); document.layers['div1'].document.close(); } if(IE4 == true){ div1.filters[0].Apply(); div1.filters[0].transition=Trans; div1.filters[0].duration=Time; div1.innerHTML = span[i]; div1.filters[0].Play(); } i++; tID=setTimeout("chgDvi1()",spd); if(i==span.length)i=0; } //--> </SCRIPT>
BODYに記述
<div id="div1" style="width:300px;height:200px;filter:revealTrans;"> </div> <a href="javascript:chgDvi1()">GO!</a> <a href="javascript:clearTimeout(tID)">STOP</a>
解説・備考
IEのみスライドの仕方を指定することができ、 Netscapeではスライドせずに切り替わります。
非力なパソコンだと処理が追いつかずエラーが出ます。
- [BACK] -
|
AUTO
M
OBILES
|
D
OWNLOADS
|
L
INK
|
B
BS
|
A
BOUT
|
F
EEDBACK
Copyright © 1999-2005 By よーすけ
mailto:<
web@@@write-off.cside.com
>