تصف هذه المقالة تأثير عرض التبديل الشريحة التي تنفذها JS. شاركه للرجوع إليه ، على النحو التالي:
HTML:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title js prose </title> <style = "sext" Padding: 0 ؛}#Banner {width: 1000px ؛ text-align: left ؛ الخلفية: #ffff ؛ الهامش: 0 auto ؛}#banner img {display: block ؛ تعويم: اليسار ؛}. mainbox {overflow: hidden ؛ الموضع: قريب ؛}. Flashbox {Overflow: Hidden ؛ الموضع: النسبية ؛}. imagebox {text-align: leight ؛ الموضع: النسبية ؛ z-index: 999 ؛}. الخلفية: url (أنماط/صور/ppt_icon2.png) ؛}. curimg {background: url (styles/images/ppt_icon1.png) ؛} </style> <script type = "text/javaScript" src = "styles/js/ppt_ban.js = جديد pptbox () ؛ box.width = 1000 ؛ // Width Box.Height = 226 ؛ // Height Box.Autoplayer = 3 ؛ // Autoplay الفاصل الزمني // box.add ({"url": "عنوان الصورة" ، "العنوان": "Hoom title" ، "HREF": "Link Address"}) Box.add ({"url": "Styles/Images/Fck_04.jpg" ، "HREF": "###" ، "title": "Hoom Proper title 1"}) ؛ Box.add ({"url": "Styles/Images/Fck_04.jpg" ، "HREF": "###" ، "title": "Hoom Proper title 1"}) ؛ Box.add ({"url": "Styles/Images/Fck_04.jpg" ، "HREF": "###" ، "title": "Supperence Propert title 1"}) ؛ Box.add ({"url": "Styles/Images/Fck_04.jpg" ، "HREF": "###" ، "title": "Supperence Propert title 1"}) ؛ box.show () ؛ </script> </viv> </body> </html>JS:
دالة pptbox () {this.uid = pptboxHelper.getId () ؛ pptboxhelper.instance [this.uid] = this ؛ هذا ._ $ = function (id) {return document.getElementById (id) ؛} ؛ هذا. 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 ؛ height:"+(this.height)+"px ؛'>" ؛ html+= "<div id = '"+this.uid+"_ flashbox' class = 'flashbox' style = 'width:"+flashboxwidth+"px ؛ height:"+(this.height)+"px ؛'> </viv>" ؛ html+= "<div id = '"+this.uid+"_ imagebox class =' imagebox 'style =' width:"+this.width+"px ؛ height:"+(this.picheight)+"px ؛ top:-"+(this.picheight+20)+"px ؛ html += "</viv>" ؛ 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)؟ onMouseover =/"eventstr+". mouseoverpic ("+i+") ClearInterval (this._autoplay) ؛ SetInterval (eventstr ، this.autoplayer*1000) ؛ classid = 'clsid: D27CDB6E-AE6D-11CF-96B8-44455540000' "+" codeBase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#7،0،19،0 الارتفاع = ""+height+""> "+" <param name =/"movie/" value =/"+url+"/"/>"+"<param name = 'Quality' value = 'high'/> pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' height = '"+height+"'> </sumbed> "+" </bomfic> "؛ if (this._box [idx] .href) {style = "cursor: pointer"} html = "<img src = '"+url+"' style = 'width:"+width+"px ؛ height:"+height+"px ؛ } إرجاع html ؛ } ، changeIndex: function (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 devimg" ؛ 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 eventstr = "pptboxhelper.instance ['"+this.uid+"'] ._ play ()" ؛ this._autoplay = setInterval (eventstr ، this.autoplayer*1000) ؛ }}} var pptboxhelper = {count: 0 ، enualle: {} ، getId: function () {return '_ppt_box-'+(this.count ++) ؛ } ؛ if (! document.getElementById (elementId)) return 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 repert = "movelement ('"+elementId+"' ،"+final_x+"،"+veral+")" ؛ elem.movement = setTimeout (كرر ، فاصل) ؛}العروض كما يلي:
لمزيد من المعلومات حول المحتوى المتعلق بـ JavaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، ملخص تقنيات خوارزمية بحث JavaScript "،" ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و "ملخص". "ملخص استخدام العمليات الرياضية JavaScript"
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.