<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
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
document.write('<st'+'yle>');
document.write('td {font-size:12px; font-family:굴림; text-decoration:none; }');
document.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
document.write('A:hover {text-decoration:none; color:ff9900}');
document.write('font { font-size: 9pt; }');
document.write('.cnj_input {background-color:rgb(240,240,240);border-width:1pt; height:16pt;cursor:hand;}');
document.write('.cnj_input2 {border-width:1; border-color:rgb(204,204,204); border-style:solid;cursor:hand;}');
document.write('.cnj_input3 { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;cursor:hand;}');
document.write('.cnj_input4 { scrollbar-face-color: #FFCC33;scrollbar-shadow-color: #ffffff;scrollbar-highlight-color: #F3f3f3;scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #F3f3f3;scrollbar-track-color: #ffffff;scrollbar-arrow-color: #f9f9f9;cursor:hand; }');
document.write('</st'+'yle>');
var galleryList = new Array();
var galleryIndex = 0;
var gallerynum = 4; // 초기 보여줄 목록수

function addGallery(img, subject, link, target) {
 galleryList.push({"img": img, "subject": subject, "link": link, "target": target});
}

function moveLeft() {
 if (galleryIndex > 0) {
  galleryIndex--;
  drawGallery();
 }
}

function moveRight() {
 if (galleryIndex < galleryList.length - gallerynum) {
  galleryIndex++;
  drawGallery();
 }
}

function drawGallery() {
 var i = 0;
 var html = "";
 var gallery;
 
 html += "<table width='345' cellspacing='0' cellpadding='0' border='0' align='center'>\n";
 html += "<tr>\n";
 html += "<td width='17'></td>\n";
 
 for (i = galleryIndex; i < galleryIndex + gallerynum && i < galleryList.length; i++) {
  gallery = galleryList[i];

  if(gallery.target == "") {
   targetName = "";
  } else if(gallery.target == "_blank") {
   targetName = " target='_black'";
  } else {
   targetName = " target='"+gallery.target+"'";
  }

  html += "<td width='82' valign='top'>\n";
  html += "<table width='67' cellspacing='0' cellpadding='0' border='0'>\n";
  html += "<tr><td style='border:1px solid #E5E5E3'><a href='" + gallery.link + "' " + targetName + " title='" + gallery.subject + "'><img src='" + gallery.img + "' width='126' height='93'></a></td></tr>\n";
  html += "</table>\n";
  html += "<table width='70' cellspacing='0' cellpadding='0' border='0'>\n";
  html += "<tr><td height='8'></td></tr>\n";
  html += "<tr><td align='center'><a href='" + gallery.link + "' " + targetName + " title='" + gallery.subject + "'>" + gallery.subject + "</a></td></tr>\n";
  html += "</table>\n";  
  html += "</td>\n";
 }
 html += "</td>\n";
 html += "</tr>\n";
 html += "</table>\n";
 var objDiv = document.getElementById("gallerylist");
 objDiv.innerHTML = html;
}
</script>
<table width="370" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td width="20"><input type="button" value="◀" style="width:20;height:137" onClick="javascript:moveLeft();" class="cnj_input" onFocus="this.blur()"></td>
<td width="5"></td>
<td width="345" style="border-top:1px solid #E6E6E6; border-bottom:1px solid #E6E6E6;padding-top:10px;">
<div id="gallerylist"></div>
</td>
<td width="5"></td>
<td width="20"><input type="button" value="▶" style="width:20;height:137" onClick="javascript:moveRight();" class="cnj_input" onFocus="this.blur()"></td>
</tr>
<tr><td height="18"></td></tr>
</table>
<script language="javascript">
addGallery('../cgi/js/car01.jpg', '1번 그림', 'http://www.cginjs.com/','_blank'); // 새창일때
addGallery('../cgi/js/car02.jpg', '2번 그림', 'http://www.cginjs.com/',''); // 현재창에 링크시 공백으로 나둔다.
addGallery('../cgi/js/car03.jpg', '3번 그림', 'http://www.cginjs.com/',''); // 현재창에 링크시 공백으로 나둔다.
addGallery('../cgi/js/car04.jpg', '4번 그림', 'http://www.cginjs.com/','main'); // 프레임에 타켓 지정
addGallery('../cgi/js/car05.jpg', '5번 그림', 'http://www.cginjs.com/',''); // 현재창에 링크시 공백으로 나둔다.
addGallery('../cgi/js/car06.jpg', '6번 그림', 'http://www.cginjs.com/',''); // 현재창에 링크시 공백으로 나둔다.
drawGallery();
</script>

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

출처:http://www.cginjs.com