이 기사에서는 JS가 구현 한 슬라이드 스위치 디스플레이 효과에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
HTML :
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 순수한 JS 슬라이드 버전 </title> <스타일 타입 = "text/css"> {margin : 0; 패딩 : 0;}#배너 {너비 : 1000px; 텍스트-정렬 : 왼쪽; 배경 : #ffff; 여백 : 0 Auto;}#배너 img {디스플레이 : 블록; float : 왼쪽;}. 메인 박스 {오버플로 : 숨겨; 위치 : 상대;}. Flashbox {오버플로 : 숨겨; 위치 : 상대적;}. imagebox {텍스트-알림 : 오른쪽; 위치 : 상대; z-index : 999;}. bitdiv {디스플레이 : 인라인-블록; 너비 : 18px; 배경 : URL (Styles/Images/PPT_ICON2.png);}. Curimg {backgrage : url (Styles/images/ppt_icon1.png);} </style> <script type = "text/javaScript"src = "styles/js/ppt_ban.js"> var box = 새로운 pptbox (); box.width = 1000; // width box.height = 226; // height box.AutoPlayer = 3; // AUTOPLAY 간격 시간 // box.add ({ "url": "im box.add ({ "url": "스타일/이미지/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({ "url": "스타일/이미지/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({ "url": "스타일/이미지/fck_04.jpg", "href": "###", "title": "서스펜션 프롬프트 제목 1"}); box.add ({ "url": "스타일/이미지/fck_04.jpg", "href": "###", "title": "서스펜션 프롬프트 제목 1"}); box.show (); </script> </div> </body> </html>JS :
함수 pptbox () {this.uid = pptboxHelper.getId (); pptboxhelper.instance [this.uid] = this; 이 ._ $ = function (id) {return document.getElementById (id);}; this.width = 400; // 너비 this.height = 300; // height this.picwidth = 15; // 작은 이미지 너비 this.picheight = 12; // 작은 이미지 높이 this.AutoPlayer = 4; // AutoPlay 간격 (초) this.target = "_blank"; this._box = []; this._curindex = 0;} pptbox.prototype = {_createmainbox : function () {var flashboxwidth = this.width * this._box.length; var html = "<div id = '"+this.uid+"_ mainbox'class = 'mainbox'style = '너비 :"+(this.width)+"px; 높이 :"+(this.height)+"px;'>"; html+= "<div id = '"+this.uid+"_ flashbox'class = 'flashbox'style = '너비 :"+flashboxwidth+"px; height :"+(this.height)+"px;'> </div>"; html+= "<div id = '"+this.uid+"_ imagebox'class = 'imagebox'style = 'width :"+this.width+"px; height :"+(this.picheight)+"px; 상단 :-"+(this.picheight+20)+"px;'>"; html += "</div>"; document.write (html); }, _init : function () {var picstyle = ""; var eventstr = "pptboxHelper.instance [ '"+this.uid+"']"; var imagehtml = ""; var flashbox = ""; for (var i = 0; i <this._box.length; i ++) {var parameter = this._box [i]; Flashbox += this.flashhtml (parame.url, this.width, this.height, i); im OnMouseOver =/"+I+")/"> </div>"+imageHtml; ClearInterval (var idx+1); setInterval (eventStr, autoPlayer*1000); classid = 'clsid : d27cdb6e-ae6d-11cf-96b8-444553540000' "+"codebase = 'http : //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' '+whth+"' ' 높이 = '+height+"'>"+"<param name =/"movie/"movie/"value =/"+url+"/"/>"<param name = 'Quality'value = 'high'/> "+"<param name = 'wmode'value = 'transparent'> "<embed src = '+url+"'wmode = 'wmode ='opaque ' 플러그인 페이지 = 'http : //www.macromedia.com.com.com.com.com.com.com.com.com.come.com.com.com.com.comedia.com/go/getflashplayer' "+"application/x-shockwave-flash 'height ='+height+"> </embed>"</object> ";} else {var eventst ="pptboxHelper.instance [ '+this.iid+"" "; if (this. } return html; }, changeIndex : function (idx) {var parameter = this._box [idx]; MoveElement (this.uid+"_ Flashbox",-(idx*this.width), 1); var imgs = this ._ $ (this.uid+"_ imagebox"). getElementsByTagName ( "div"); imgs [this._box.length.length -1-this._curindex] .classname = "bitdiv defimg"; imgs [this._box.length-1-idx] .classname = "bitdiv curimg"; this._curindex = idx; }, mouseOverpic : function (idx) {this.changeIndex (idx); if (this.autoplay> 0) {clearinterval (this._autoplay); var eventstr = "pptboxHelper.instance [ '"+this.uid+"'] ._ play ()"; this._autoplay = setInterval (eventstr, this.autoplayer*1000); }}, clickpic : function (idx) {var parameter = this._box [idx]; if (parame.href & ¶me.href! = "") {window.open (parame.href, this.target); }}, 추가 : function (imgparam) {this._box [this._box.length] = imgparam; }, show : function () {this._createmainbox (); this._init (); if (this.autoplayer> 0) {var eventst = "pptboxHelper.instance [ '"+this.UID+"'] ._ play ()"; this._autoplay = setInterval (eventstr, this.autoplayer*1000); }}} var pptboxHelper = {count : 0, instance : {}, getId : function () {return '_ppt_box-'+(this.count ++); }}; 함수 moveElement (elementId, final_x, interval) {if (! document.getElementById) return false; if (! document.getElementById (elementId)) false를 반환합니다. var elem = document.getElementById (ElementId); if (elem.movement) {cleartimeout (elem.movement); } if (! elem.style.left) {elem.style.left = "0px"; } var xpos = parseint (elem.style.left); if (xpos == final_x) {return true; } if (xpos <final_x) {var dist = math.ceil ((final_x -xpos)/5); xpos = xpos + dist; } if (xpos> final_x) {var dist = math.ceil ((xpos -final_x)/5); XPOS = XPOS -DIST; } elem.style.left = xpos + "px"; var repeat = "MoveElement ( '+elementId+"', "+final_x+", "+interval+") "; elem.movement = settimeout (반복, 간격);}렌더링은 다음과 같습니다.
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "JavaScript 오류 및 디버깅", "Javascript Spruction 및 MolgoRither and algoRITHES" "JavaScript 수학 연산 사용 요약"
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.