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>