슬라이드쇼

<script language="JavaScript">
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
var imgNum = 0;
var ImageArray = new Array();

// 큰 이미지 리스트 순서는 0 부터 시작 ==> 이미지 추가는 , "이미지추가.jpg" 하면 됩니다.
// 그런다음 아래에서
// <img onmouseover=javascript:changeImgThumb(추가 숫자); onmouseout=javascript:changeImgBack(); height="59" src="../cgi/js/이미지추가.jpg" width="80" style="CURSOR: hand;" >
// 이런식으로 추가 하면 됩니다.

var ImageArray = new Array("car01.jpg", "car02.jpg", "car03.jpg", "car04.jpg", "car05.jpg", "car06.jpg");
// var ImageArray = new Array("car01.jpg", "car02.jpg", "이미지추가.jpg");

var imgs        = new Array();
for (var i = 0; i < ImageArray.length; i++){
    imgs[i] = new Image();
    imgs[i].src = "../cgi/js/" + ImageArray[i]; // 경로 + 이미지 파일(var ImageArray)
}

function changeImg(){ // 슬라이드 쇼
if( imgNum == ImageArray.length - 1){
     imgNum = 0;
    } else{
     imgNum ++;
    }
    document.cnjPic.src = imgs[imgNum].src;
    return;
}

function changeImgThumb(imgSeq){ // 마우스가 작은 이미지에 갔을때 큰 이미지 보여주는 부분
    document.cnjPic.src = imgs[imgSeq].src;
    return;
}

function changeImgBack(){ // 마우스가 작은 이미지에서 떨어졌을때(onmouseout) 보여줄 화면 부분
    document.cnjPic.src = imgs[imgNum].src; // 위에 var imgNum값과 관계 있으면 슬라이드쇼 했을때 마지막 그림과 관련있음
    return;
}
</script>

<table cellSpacing=0 cellPadding="5" width=260 border=0 align="center">
<tr>
<td valign=top align="center" width="286" colspan="3">
이미지 갤러리 + 슬라이드 쇼<br><br>큰 이미지<br><br><img src="../cgi/js/car01.jpg" border=0 name=cnjPic width="126" height="93"><br>
</td>
</tr>
<tr>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(0);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car01.jpg" width="80" style="CURSOR: hand;" >
</td>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(1);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car02.jpg" width="80" style="CURSOR: hand;" >
</td>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(2);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car03.jpg" width="80" style="CURSOR: hand;" >
</td>
</tr>
<tr>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(3);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car04.jpg" width="80" style="CURSOR: hand;" >
</td>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(4);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car05.jpg" width="80" style="CURSOR: hand;" >
</td>
<td align=middle bgColor=white height=60>
<img onmouseover=javascript:changeImgThumb(5);
onmouseout=javascript:changeImgBack();
height="59" src="../cgi/js/car06.jpg" width="80" style="CURSOR: hand;" >
</td>
</tr>
<tr><td align="center" colspan="3"><p> </p></td></tr>
<tr><td align="center" colspan="3"><A href="javascript:changeImg();">슬라이드 ▶</A> </td></tr>
</table>

<!-- Script Size : 3.449 Bytes -->