TOP /リクエスト(1ページに複数使用) 画像の入れ替え(サムネイル表示&スライドショー)

Explanation of a picture
ループ

Explanation of a picture
ループ

同一ページに複数設置する場合は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>