YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

prototype(PeriodicalExecuter)을 이용한 롤링

페이지 정보

작성자 MintState 댓글 0건 조회 10,517회 작성일 09-02-05 12:18

본문

prototype(PeriodicalExecuter)을 이용한 롤링


필수적으로 prototype.js 가 있어야 합니다.
첨부 파일을 확인하세요.

<script type="text/javascript">
<!--
	var RollingBanner = {mouseOver: function() {}, mouseOut:function() {}, clickToMove: function() {}}
//-->
</script>
<div class="ad_btn" id="lets_banner" onmouseover="RollingBanner.mouseOver(event);" onmouseout="RollingBanner.mouseOut(event);">>
	<a href="#" class="left_arrow" onclick="RollingBanner.clickToMove(event, -1);">이전</a>
	<a href="http://yesyo.com" title="똑똑한 여자들은 다 어디로 갔을까?"><img src="10428_b.gif" alt="똑똑한 여자들은 다 어디로 갔을까?" /></a>
	<a href="#" class="right_darrow" onclick="RollingBanner.clickToMove(event, 1);">다음</a>
		</div>
	</div>
</div>
		
<script type="text/javascript">
<!--
	var ReviewBanner = [{'img': '10429_b.gif', 'title': '죽음의 중지', 'href': 'http://yesyo.com', 'date': '1.30~2.14'},{'img': '10428_b.gif', 'title': '똑똑한 여자들은 다 어디로 ..', 'href': 'http://yesyo.com', 'date': '1.30~2.14'},{'img': '10427_b.gif', 'title': '너는 꽃미남', 'href': 'http://yesyo.com', 'date': '1.30~2.14'},{'img': '10426_b.gif', 'title': '오후 다섯 시의 외계인', 'href': 'http://yesyo.com', 'date': '1.30~2.14'},{'img': '10425_b.gif', 'title': 'Quiet Storm', 'href': 'http://yesyo.com', 'date': '1.30~2.14'}];
	var RollingBanner = {
		executer: null,
		reviewKey: 2,

		initialize: function() {
			this.reviewKey = Math.floor(Math.random() * ReviewBanner.length);
			var item = ReviewBanner[this.reviewKey++];
			
			this.banner = $('lets_banner');
			this.banner.update(this.template.evaluate(item));
		},

		mouseOver: function(event) {
			Event.stop(event);
			
			if(this.executer) { 
				this.executer.stop();
				this.executer = null;
			}
		},
		mouseOut: function(event) {
			Event.stop(event);
			
			if(this.executer === null) {
				this.executer = new PeriodicalExecuter(RollingBanner.moveNext.bind(RollingBanner), 2);
			}
		},
		
		clickToMove: function(event, value) {
			Event.stop(event);
			this._move(value);
		},
		
		moveNext: function() { this._move(1); },
		movePrev: function(event) { this._move(-1); },
		
		_move: function(value) {
			if(ReviewBanner.length != 0) { 
				this.reviewKey = this.reviewKey +value;
				if(this.reviewKey < 0) {
					this.reviewKey = ReviewBanner.length -1;
				}else if(this.reviewKey >= ReviewBanner.length){
					this.reviewKey = 0;
				}
				var item = ReviewBanner[this.reviewKey];
				this.banner.update(this.template.evaluate(item));
			}
		},
		
		template: new Template(
			'<a href="#" class="left_arrow" onclick="RollingBanner.clickToMove(event, -1);">이전</a>' +
			'<a href="#{href}" title="#{title}"><img src="#{img}" border="0" alt="#{title}"/></a>' + 
			'<a href="#" class="right_arrow" onclick="RollingBanner.clickToMove(event, 1);">다음</a>'
		)
	};
	
	RollingBanner.initialize();
	RollingBanner.executer = new PeriodicalExecuter(RollingBanner.moveNext.bind(RollingBanner), 2);
//-->
</script>
첨부 파일
파일 종류: png egloos_roll.png (9.5K, 31 views)
파일 종류: rar egloos_roll.rar (33.5K, 25 views)

댓글목록

등록된 댓글이 없습니다.

Total 178건 2 페이지
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2019, YesYo.com MintState. ™