[JavaScript] 시간 맞춰 돌아가는 롤링배너 (Rolling Banner)

개념잡기용 초간단 시간 맞춰 돌아가는 롤링배너.

setInterval에서 this. scope 유지를 위한 처리가 포인트...

<script>

/**

  * 롤링배너 객체

*/

var rollingBanner = function(oContainer) {

this.oContainer     = oContainer; // 롤링배너 컨테이너

this.oImg             = document.createElement("img"); // 롤링배너용 이미지노드 생성

this.aImg             = new Array(); // 롤링배너용 이미지 배열

this.iCurrentIndex = 0; // 현재 이미지 인덱스

// 롤링배너 이미지를 컨테이너에 넣음

if (this.oContainer) this.oContainer.appendChild(this.oImg);

// 배너이미지 추가

this.addImg = function(sSrc) {

this.aImg.push(sSrc);

};

// 다음 이미지 세팅

this.setNextImg = function() {

if (this.iCurrentIndex>=this.aImg.length) this.iCurrentIndex = 0;

this.oImg.src = this.aImg[this.iCurrentIndex++];

};

// 롤링 시작

this.start = function(iInterval) {

this.setNextImg();

var t = this;

setInterval(function() { t.setNextImg(); }, iInterval);

};

};

window.onload = function() {

var oRollingBanner = new rollingBanner(document.getElementById("ban"));

oRollingBanner.addImg("http://dna.daum.net/images/right_1.gif");

oRollingBanner.addImg("http://dna.daum.net/images/right_2.gif");

oRollingBanner.addImg("http://dna.daum.net/images/right_3.gif");

oRollingBanner.start(1000);

}

</script>

<!-- 롤링배너 컨테이너 -->

<div id="ban"></div>