TOP /リクエスト(1ページに複数使用) | 画像の入れ替え(サムネイル表示&スライドショー) |
---|
同一ページに複数設置する場合は2の部分を全て変更してください。
<script type="text/javascript"><!-- chimg2=new Array(); chimg2[0]=["01.jpg","一枚目の説明"]; chimg2[1]=["02.jpg","二枚目の説明"]; chimg2[2]=["03.jpg","三枚目の説明"]; //chimg2[連番]=["画像ファイル名","画像の説明"]; changesec2=5000; //入れ替え時間(ミリ秒) //----------------------------------------- imgno2=0;imgflag2=0;showcheck2=0;var timeid2; function changeimg2(im){ if(document.all){ if(imgno2<im) document.images["viewimg2"].filters[0].transition=7; else document.images["viewimg2"].filters[0].transition=6; document.images["viewimg2"].filters[0].Apply(); document.images["viewimg2"].src=chimg2[im][0]; document.images["viewimg2"].filters[0].Play();} else{ document.images["viewimg2"].src=chimg2[im][0];} document.getElementById("imgmemo2").innerHTML=chimg2[im][1]; imgno2=im; } function direction2(di){ if(di=='migi') imgflag2=1; else if(di=='hidari') imgflag2=2; if(!showcheck2){ clearTimeout(timeid2); showcheck2=1; showstart2();} } function showstart2(){ if(!showcheck2)return; if(imgflag2==1){ if(!document.showform2.loopcheck2.checked && imgno2==(chimg2.length-1)){ showcheck2=0;return }else{ imgno2++; imgno2%=chimg2.length; } }else{ if(!document.showform2.loopcheck2.checked && imgno2==0){ showcheck2=0;return }else{ imgno2--;if(imgno2<0)imgno2=chimg2.length-1; } } if(document.all){ if(imgflag2==1) document.images["viewimg2"].filters[0].transition=7; else document.images["viewimg2"].filters[0].transition=6; document.images["viewimg2"].filters[0].Apply(); document.images["viewimg2"].src=chimg2[imgno2][0]; document.images["viewimg2"].filters[0].Play();} else{ document.images["viewimg2"].src=chimg2[imgno2][0];} document.getElementById("imgmemo2").innerHTML=chimg2[imgno2][1]; timeid2=setTimeout("showstart2()",changesec2);} /* himajin.moo.jp */ // --></script> <form name="showform2"> <table border=1> <tr><td rowspan=2> <!--サムネイル部分ここから--> <img src="01.jpg"width="80"height="60"onclick="changeimg2(0)"> <p> <img src="02.jpg"width="80"height="60"onclick="changeimg2(1)"> <p> <img src="03.jpg"width="80"height="60"onclick="changeimg2(2)"> <!--サムネイル部分ここまで--> </td><td> <!--表示部分以下1行--> <img src="01.jpg"id="viewimg2"STYLE="filter:revealTrans(transition=7,duration=1)"> </td></tr> <tr><td id="imgmemo2"style="font-size: 10pt;"> Explanation of a picture </td></tr> </table> <input type="button"value="<<"onclick="direction2('hidari')"title="REVERSE"><input type="button"value="☆"onclick="showcheck2=0"title="STOP"><input type="button"value=">>"onclick="direction2('migi')"title="START"> <input type="checkbox"name="loopcheck2"checked><font size=2>ループ</font> </form>