บทความนี้อธิบายถึงผลการแสดงผลการสลับสไลด์ที่ใช้โดย 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> Padding: 0;}#Banner {Width: 1000px; text-allign: left; ความเป็นมา: #FFFF; มาร์จิ้น: 0 auto;}#แบนเนอร์ img {display: block; ลอย: ซ้าย;}. mainbox {overflow: ซ่อน; ตำแหน่ง: สัมพัทธ์;}. แฟลชบ็อกซ์ {ล้น: ซ่อน; ตำแหน่ง: สัมพัทธ์;}. imagebox {text-allign: ขวา; ตำแหน่ง: สัมพัทธ์; z-index: 999;}. bitdiv {แสดง: inline-block; ความกว้าง: 18px; ความสูง: 18px; ระยะขอบ: 0 10px 10px 0px; ความเป็นมา: url (styles/images/ppt_icon2.png);}. curimg {พื้นหลัง: url (styles/images/ppt_icon1.png);} </style> <script type = "text/javascript" src = "idles/js/js/ppt_ban.js" pptbox (); box.width = 1,000; // width box.height = 226; // ความสูง box.autoplayer = 3; // ช่วงเวลาการเล่นอัตโนมัติเวลา // box.add ({"url": "ที่อยู่รูปภาพ", "title": "Hoom Title", "Href": "Link Address"}) box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Hoom Prompt Title 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Hoom Prompt Title 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Suspension Promple Title 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Suspension Promple Title 1"}); box.show (); </script> </div> </body> </html>JS:
ฟังก์ชั่น pptbox () {this.uid = pptboxhelper.getId (); pptboxhelper.instance [this.uid] = this; นี้ ._ $ = ฟังก์ชั่น (id) {return document.getElementById (id);}; this.width = 400; // width this.height = 300; // ความสูง this.picwidth = 15; // ความกว้างของภาพขนาดเล็ก this.picheight = 12; // ความสูงของภาพขนาดเล็ก AUTOPLAYER = 4; // ช่วงการแสดงอัตโนมัติ (วินาที) 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 = 'width:"+(this.width)+"px; ความสูง:"+(this.height)+"px;'>"; html+= "<div id = '"+this.uid+"_ flashbox' class = 'flashbox' style = 'width:"+flashboxwidth+"px; ความสูง:"+ html+= "<div id = '"+this.uid+"_ imagebox' class = 'imagebox' style = 'width:"+this.width+"px; ความสูง:"+(this.picheight)+"px; top:-"+(this.picheight+20)+"px; html += "</div>"; document.write (html); }, _init: function () {var picstyle = ""; var eventstr = "pptboxhelper.instance ['"+this.uid+"']"; var imagehtml = ""; var flashbox = ""; สำหรับ (var i = 0; i <this._box.length; i ++) {var parameter = this._box [i]; flashbox += this.flashhtml (parame.url, this.width, this.height, i); imagehtml = "<div class = 'bitdiv"+((i == 0)? "curimg": "defimg")+"' title ="+parame.title+"src = 'bit01.gif'" picstyle+ OnMouseOver =/"+EventsTr+". MouseOverpic ("+i+")/"> </div>"+ImageHtml; ClearInterval (this._autoplay); var idx = this._curindex+1; SetInterval (EventsTr, this.autoplayer*1000); classid = 'clsid: d27cdb6e-ae6d-11cf-96b8-444553540000' "+" codebase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version ความสูง = '"+ความสูง+"'> "+" <param name =/"movie/" value =/"+url+"/"/>"+"<param name = 'value' value = 'high'/>"+"<param name = 'wmode' value = 'proseparent'>"+"<ฝัง src = '+url+" pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' ความสูง = '"+ความสูง+"'> </embed> "+" </object> "; if (this._box [idx] .href) {style = "เคอร์เซอร์: ตัวชี้"} html = "<img src = '"+url+"' style = 'ความกว้าง:"+width+"px; ความสูง:" ความสูง+"px;"+สไตล์+" } ส่งคืน html; }, ChangeIndex: ฟังก์ชัน (idx) {var parameter = this._box [idx]; Movelement (this.uid+"_ flashbox",-(idx*this.width), 1); var imgs = this ._ $ (this.uid+"_ imageBox"). getElementsByTagname ("div"); imgs [this._box.length-1-this._curindex] .classname = "bitdiv defimg"; imgs [this._box.length-1-idx] .classname = "bitdiv curimg"; this._curindex = idx; }, MouseOverpic: ฟังก์ชั่น (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: ฟังก์ชัน (idx) {var parameter = this._box [idx]; if (parame.href & ¶me.href! = "") {window.open (parame.href, this.target); }}, เพิ่ม: ฟังก์ชั่น (imgparam) {this._box [this._box.length] = imgparam; }, show: function () {this._createMainBox (); this._init (); if (this.autoplayer> 0) {var eventstr = "pptboxhelper.instance ['"+this.uid+"'] ._ play ()"; this._autoplay = setInterval (EventsTr, this.autoplayer*1000); }}} var pptboxhelper = {count: 0, อินสแตนซ์: {}, getId: function () {return '_ppt_box-'+(this.count ++); }}; ฟังก์ชั่นการเคลื่อนย้าย (ElementId, final_x, Interval) {ถ้า (! document.getElementById) ส่งคืน 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 repea = "movelement ('"+elementid+"',"+final_x+","+interval+")"; elem.movement = settimeout (ทำซ้ำช่วงเวลา);}การเรนเดอร์มีดังนี้:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปเทคนิคอัลกอริทึมการค้นหา JavaScript", "สรุปผลกระทบของ JavaScript Techniques และ Techniques ของ JavaScript "สรุปการใช้งานทางคณิตศาสตร์ JavaScript"
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน