（１） ↓を <head>〜</head> 間に書き込んでください。
| <!--以下をhead 内に入れます--> <SCRIPT LANGUAGE="JavaScript"> <!-- // //画像の読み込み var pict0=new Image(); pict0.src="画像アドレス２"; var pict1=new Image(); pict1.src="画像アドレス３"; var pict2=new Image(); pict2.src="画像アドレス４"; var pict3=new Image(); pict3.src="画像アドレス５"; var pict4=new Image(); pict4.src="画像アドレス６"; //説明文 var bun = new Array(); bun[0]="No1説明"; bun[1]="No2説明"; bun[2]="No3説明"; bun[3]="No4説明"; bun[4]="No5説明"; cnt = 0; //表示間隔初期設定（2秒） interval = 2000;// 現在2秒に設定 1000が1秒です function my_slide(){ //以下画像枚数分繰り返し if(cnt==0) {document.show.src=pict0.src; document.myform.setumei.value=bun[cnt]; coment(); cnt++; }else if(cnt==1) {document.show.src=pict1.src; document.myform.setumei.value=bun[cnt]; coment(); cnt++; }else if(cnt==2) {document.show.src=pict2.src; document.myform.setumei.value=bun[cnt]; coment(); cnt++; }else if(cnt==3) {document.show.src=pict3.src; document.myform.setumei.value=bun[cnt]; coment(); cnt++; }else if(cnt==4) {document.show.src=pict4.src; coment(); cnt=0; } } function my_move(){ my_slide(); timerID = setTimeout("my_move()",interval); } function stop(){ clearTimeout(timerID); document.myform.btn.disabled=false; } function ff(){ clearTimeout(timerID); my_slide(); document.myform.btn.disabled=false; } function saikai(){ timerID = setTimeout("my_move()",interval); document.myform.btn.disabled=true; } function coment(){ document.myform.setumei.value = bun[cnt]; document.myform.maisu.value = cnt+1; } function intv(){ var i; if (document.myform.delay.length) { for (i = 0; i < document.myform.delay.length; i++) { if (document.myform.delay[i].checked) { interval=(document.myform.delay[i].value); } } } } // --> </SCRIPT> <!--ここまでをhead 内に入れます--> |
<● 画像を増やす時、下記の様に＜画像を読み込む＞タグソースを増やしてください。
このとき、最初のタグを参考に、数値に注意してください。
（A)
pict4=new Image();
pict5.src="画像アドレス７";
var pict4=new Image();
pict6.src="画像アドレス８";
（B)
bun[5]="No5説明";
bun[6]="No6説明";
● 同じように、減らすときは、
減らす枚数分の（A)(B)のタグを外してください。
（２） <body> に、↓の赤表示部分を書き加えてください
<BODY onload="my_move()">
（３） ↓を <body>〜</body> 間に書き込んでください。
| <!--以下をbody 内に入れます--> <center> <img src="http://最初に表示する画像アドレス１.gif" width="640" height="480" name="show" style="border:5px ridge #e0e0e0;"> <br> <form name="myform"> <input type="text" name="maisu" size="2" readonly>枚目 <input type="text" name="setumei" size="35" readonly><br> <input type="button" value="PLAY" onClick="saikai()" name="btn" disabled> <input type="button" value="STOP" onClick="stop()"> <input type="button" value=">>" onClick="ff()"> <br> <font size="2"> 表示間隔 <input type="radio" name="delay" value=4000 onClick="intv()"> 4sec <input type="radio" name="delay" value=6000 checked onClick="intv()"> 6sec <input type="radio" name="delay" value=8000 onClick="intv()"> 8sec <input type="radio" name="delay" value=10000 onClick="intv()"> 10sec </font> </form></center> <!--ここまでをbody 内に入れます--> |
● 画像の表示間隔は、
赤表示で記入している数値を変更すれば、
早くにも遅くにも出来ます。
1000が1秒です。
変更するときは、
<input type="radio" name="delay" value=4000 onClick="intv()">
4sec
の様に、数値をあわせて下さい。
● ＜最初に表示する画像＞は、 スライドになった時、表にはでません。
スライドにしたい場合は、
＜head＞内に書き込んだ、画像アドレスと同じ物を使えばよいです。
● 画像サイズは、見本では、横６４０px・・縦８pxにしています。
使う画像で、好きにサイズを変更して、小さくしてください。
ただし・・
＜使う画像は同じサイズにしないと、見た目・・汚いかも・・＞
● 画像アドレス1枚目の style="border:5px solid #C4E1E1 は、好きなサイズや色に変更してください。
| SEO | [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送 | ||
