prototype(PeriodicalExecuter)을 이용한 롤링
로빈아빠
본문
prototype(PeriodicalExecuter)을 이용한 롤링
필수적으로 prototype.js 가 있어야 합니다.
첨부 파일을 확인하세요.
필수적으로 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>
관련링크
댓글목록
등록된 댓글이 없습니다.