자바스크립트를 이용해서 여러장의 이미지 롤링하기

쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다.

먼저 예제 이미지는 총 4장 입니다.
현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다.

1. 이미지 넘버
이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다.

<!-- 이미지 넘버링 -->
<div style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: relative; TOP: 0px; HEIGHT: 0px; display:block;">
 <div style="Z-INDEX: 1; LEFT: 800px; WIDTH: 135px; POSITION: absolute; TOP: 15px; HEIGHT: 0px">
  <table border=0 cellpadding=0 cellspacing=0 align=right>
   <tr>
    <!-- 이미지 넘버 1 -->
    <td width=20><a href="#none"><img id='num_1' src="http://dalincoupon.com/images/group/ico1_on_.gif" border=0 onclick="clickImg(1,'/mall/updir/products/99fed6c0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 2 -->
    <td width=20><a href="#none"><img id='num_2' src="http://dalincoupon.com/images/group/ico2_off_.gif" border=0 onclick="clickImg(2,'http://dalincoupon.com/mall/updir/products/1239dae0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 3 -->
    <td width=20><a href="#none"><img id='num_3' src="http://dalincoupon.com/images/group/ico3_off_.gif" border=0 onclick="clickImg(3,'http://dalincoupon.com/mall/updir/products/76acc690.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 4 -->
    <td width=20><a href="#none"><img id='num_4' src="http://dalincoupon.com/images/group/ico4_off_.gif" border=0 onclick="clickImg(4,'http://dalincoupon.com/mall/updir/products/94a63cd0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이후 이미지를 추가 하셔도 됩니다 -->
   </tr>
  </table>
 </div>
</div>
<!-- //이미지 넘버링 -->

이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다.
"num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다.


2. 대표 이미지 출력
기본적으로 출력된 첫번째 이미지를 적용 합니다.
img 태그에 id값을 "mainImage"로 적용합니다.

<!--상품 메인이미지-->
<img id="mainImage" src="http://dalincoupon.com/mall/updir/products/99fed6c0.jpg" width="950">

3. 자바스크립트 소스

<script type="text/javascript">
<!--
var numIdx = 1; //첫 이미지 배열 번호
var nextimg = 2; //다음 바뀔 이미지 배열 번호
var timerchecker = null; //롤링 시간을 초기화 하기 위한 선언

var imgs = new Array(); //이미지 URL을 배열로 담아두기
imgs[1] = "http://dalincoupon.com/mall/updir/products/99fed6c0.jpg";
imgs[2] = "http://dalincoupon.com/mall/updir/products/1239dae0.jpg";
imgs[3] = "http://dalincoupon.com/mall/updir/products/76acc690.jpg";
imgs[4] = "http://dalincoupon.com/mall/updir/products/94a63cd0.jpg";

/* 이미지 넘버를 클릭시 호출하는 함수 */
function clickImg(idx,img) {
 clearTimeout(timerchecker); //시간 초기화
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1; //마지막 이미지가 아니면 다음 +1 이미지로 이동
 } else {
  nextimg = 1; //이미지가 마지막 장이면 다음 이미지는 첫장으로 이동
 }
 /* 이미지 롤링 호출, 이용자가 클릭해서 보는 이미지 이므로 20초 지연 */
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",20000);
}

/* 이미지 롤링 함수 */
function changeImg(idx,img) {
 clearTimeout(timerchecker);
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1;
 } else {
  nextimg = 1;
 }
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
}
timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
//-->
</script>

자바스크립트 내부에 주석을 달아 놨지만 다시 설명을 덧붙이겠습니다.
먼저 페이지 로딩시 지정한 이미지를 배열로 담습니다.
var imgs = new Array();

그리고, timerchecker 라는 변수에 window.setTimeout(); 함수를 담습니다.
이때 적용되는 함수로는 5000 -> 5초 지연후 changeImg() 함수를 호출 됩니다.
이때 nextimg값을 전달 하므로 처음엔 changeImg(2,http://dalincoupon.com/mall/updir/products/1239dae0.jpg);
두번째 이미지 정보를 changeImg() 함수에 전달합니다.

이미지 롤링 함수에서는 전달 받은 idx와 img 값을 이용해서 다음 이미지로 변경 그리고 이미지 넘버역시 함께 변경 합니다.

만약 사용자가 이미지 넘버를 클릭시엔 이용자가 원하는 이미지를 바로 볼수 있도록 clickImg() 함수를 호출합니다.
해당 함수 역시 changeImg() 함수와 동일하지만 단, 지연시간을 20000 -> 20초로 지정하여 사진을 볼수 있는 시간을 지연해 줍니다.
20초가 지나면 다시 원래되로 changeImg() 함수가 5초 간격으로 반복 처리 됩니다.


여기서 한가지 더 응용한다면 이미지 전환할때 슬라이드 효과를 적용할수도 있지만 그럴경우 소스가 매우 복잡해져서 이정도록 적용해 봤습니다.
위 소스를 그대로 적용시 달인쿠폰 상품 이미지가 롤링 되는것을 보실 수 있을겁니다.
달인쿠폰 반값 할인 사이트 참조하세요!
김병만의 달인쿠폰 : http://dalincoupon.com

 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=184