Artikel ini menjelaskan efek tampilan switching slide yang diimplementasikan oleh JS. Bagikan untuk referensi Anda, sebagai berikut:
html:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <adept> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/<title> pure js slide versteri padding: 0;}#Banner {width: 1000px; Text-Align: kiri; Latar Belakang: #FFFF; margin: 0 auto;}#banner img {display: block; float: left;}. Mainbox {overflow: tersembunyi; Posisi: relatif;}. FlashBox {overflow: tersembunyi; Posisi: Relatif;}. ImageBox {Text-Align: Right; Posisi: Relatif; Z-Index: 999;}. BitDiv {display: inline-block; lebar: 18px; tinggi: 18px; margin: 0 10px 10px 0px; Kursor: pointer; float: kanan;}. Defimg { Latar Belakang: URL (Styles/Images/ppt_icon2.png);}. Curimg {latar belakang: url (gaya/gambar/ppt_icon1.png);} </style> <script type = "text/javascript" src = "styles/js/ppt_ban.js"> </script> </script> </head> </js/js/ppt_ban.js "> </script> </script> </head> head = </js/ppt_ban.js"> </script> </script> </head> head = </js/ppt_ban.js "> </Script> </script> Pptbox (); box.width = 1000; // width box.height = 226; // box box.autoplayer = 3; // autoplay waktu interval // box.add ({"url": "alamat gambar", "judul": "judul hoom", "href": "alamat tautan"})) box.add ({"url": "styles/gambar/fck_04.jpg", "href": "###", "judul": "judul hoom prompt 1"}); box.add ({"url": "styles/gambar/fck_04.jpg", "href": "###", "judul": "judul hoom prompt 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Suspension Prompt Judul 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Suspension Prompt Judul 1"}); box.show (); </script> </div> </body> </html>JS:
function pptbox () {this.uid = pptBoxHelper.getId (); Pptboxhelper.instance [this.uid] = this; this ._ $ = function (id) {return document.getElementById (id);}; this.width = 400; // Lebar this.height = 300; // Tinggi this.picwidth = 15; // Lebar gambar kecil this.picheight = 12; // Tinggi gambar kecil this.autoplayer = 4; // interval otomatis (detik) 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; tinggi:"+(this.height)+"px;'>"; html+= "<div id = '"+this.uid+"_ flashbox' class = 'flashbox' style = 'width:"+flashboxwidth+"px; tinggi:"+(this.height)+"px;'> </div>"; html+= "<div id = '"+this.uid+"_ ImageBox' class = 'ImageBox' style = 'width:"+this.width+"px; tinggi:"+(this.picheight)+"px; top:-"+(this.picheight+20)+"px;'> </div>"; html += "</div>"; Document.write (html); }, _init: function () {var picstyle = ""; var eventstr = "pptboxhelper.instance ['"+this.uid+"']"; var imageHtml = ""; var flashbox = ""; untuk (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+" onclick = /""+eventstr+".clickPic("+i+")/" OnmouseOver = "+Eventtr+". MouseOverpic ("+i+")/"> </div>"+ImageHTML; ClearInter (this._Autoplay); SetInval (Eventtr, This.AutopLayer*1000); classid = 'clsid: d27cdb6e-ae6d-11cf-96b8-444553540000' "+" codeBase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7.0' '' '' '' '' '' '' '" tinggi = '"+tinggi+"'> "+" <param name =/"film/" value =/"+url+"/"/>"+"<param name = 'kualitas' value = 'high'/>"+"<param name = 'wmode' value = 'transparent'>"+"<embed src = '+url+" kualitas =' high 'high'> "+" <embed src = '+url+"kualitas =' high 'high' high '=' wm high '=' wm high '=' wm high '=' wm high '=' wm high '=' wm high 'high' high 'high' high 'high' high 'high' high 'high' high 'high' = 'wm high' Pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' height = '"+height+"'> </sembed> "+" </peject> ";} else {var eventstr =" pptboxhelper.instance ('"") {var eventstr = "pptboxhelper.insance ('"); if (this._box [idx] .href) {style = "kursor: pointer"} html = "<img src = '"+url+"' style = 'width:"+width+"px; ketinggian:"+tinggi+"px;"+style+"'/ontlick =/"+eventstr+". Klick+" px; "+style+"/ontlick =/"+eventtr+". } 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-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); }}, add: function (imgparam) {this._box [this._box.length] = imgparam; }, show: function () {this._createMainbox (); this._init (); if (this.autoplayer> 0) {var eventtr = "pptboxhelper.instance ['"+this.uid+"'] ._ play ()"; this._autoplay = setInterval (eventstr, this.autoplayer*1000); }}} var pptBoxHelper = {count: 0, instance: {}, getId: function () {return '_ppt_box-'+(this.count ++); }}; function moveElement (elementId, final_x, interval) {if (! document.geteLementById) return false; 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 REATER = "MOVERElement ('"+ElementId+"',"+final_x+","+Interval+")"; elem.movement = setTimeout (ulangi, interval);}Rendering adalah sebagai berikut:
Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan JavaScript", "Ringkasan Teknik Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik Javascript" Ringkasan Data "," Ringkasan Data "," Ringkasan Data "," Ringkasan Data "," Ringkasan Data Javascript "," Ringkasan Javascriping "Ringkasan Penggunaan Operasi Matematika JavaScript"
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.