[Nexacro17] 넥사크로 캐로셀(Carousel) 배너 만들기

좌우로 이동되는 배너를 만들어볼까 합니다.
배너 클릭시 그 링크로 이동되고, 마우스를 이미지 내에 두면 멈추고, 배너 롤링이 되는 걸 만들어봅시다.
 
먼저 초기설정을 해줍니다.
 

/**
 * @description form_ontimer() 메소드로 생성한 타이머의 시간 간격마다 발생하는 이벤트
 */
this.form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	switch (e.timerid)
	{
		case 1001:
			// 배너 롤링
			this.fnMoveStep('R');
			break;
		default:
			break;
	}
};

 
 
위처럼 적어주시구요
 

/**
 * @description 배너 롤링
 */
this.fnMoveStep = function(sMovDir) {
	var nStepCount = this.getStepCount();
	var nStepIndex = 0;
	
	switch(sMovDir) {
	case 'L':
		nStepIndex = this.getStepIndex() - 1;
		if (0 <= nStepIndex) {
			this.setStepIndex(nStepIndex);
		} else {
			this.setStepIndex(nStepCount - 1);
		}
		break;
	case 'R':
		nStepIndex = this.getStepIndex() + 1;
		if (nStepCount <= nStepIndex) {
			this.setStepIndex(0);
		} else {
			this.setStepIndex(nStepIndex);
		}
		break;
	default:
	}
};

 
위처럼 함수를 선언해줍니다.
 
case 'L'이 왼쪽으로 롤링이 되는 함수이구요
case 'R'이 오른쪽으로 롤링이 되는 함수입니다.
 
이제는
이미지 뷰어 함수를 추가해줄거에요
 

oImgView.addEventHandler("onmouseenter", this.banner_onmouseenter, this);
oImgView.addEventHandler("onmouseleave", this.banner_onmouseleave, this);
oImgView.addEventHandler("onclick", this.banner_onclick, this);

 
onmouserenter은 마우스가 이미지뷰 내에 들어갔을 때 발생하는 이벤트이고,
onmouseleave는 마우스가 이미지뷰 밖으로 나갔을 때 발생하는 이벤트입니다.
onclick은 마우스로 클릭했을 때 발생하는 이벤트입니다.
 
클릭 시 url을 호출할건데요
 

/**
 * @description 이미지 뷰 클릭 이벤트 함수
 */
this.banner_onclick = function(obj:nexacro.ImageViewer,e:nexacro.ClickEventInfo)
{
    var sUrl = this.dsList.getColumn(nRowIdx, "urlAdd");

    system.execBrowser(sUrl);
}

 
 
마지막으로 마우스로 이미지 움직임을 제어하겠습니다.
 

/**
 * @description 이미지뷰어 영역 내로 마우스 포인터가 들어왔을 때
 */
this.banner_onmouseenter = function(obj:nexacro.ImageViewer,e:nexacro.MouseEventInfo)
{
	this.killTimer(1001);
};

/**
 * @description 이미지뷰어 영역 내로 마우스 포인터가 나갔을 때
 */
this.banner_onmouseleave = function(obj:nexacro.ImageViewer,e:nexacro.MouseEventInfo)
{
	// 부가설명: setTimer(TimerId, 시간초);
	// 시간초 = 1000:1초 (즉, 3000 = 3초)
	this.setTimer(1001, 3000);
};