Este artículo describe el efecto de visualización de conmutación de diapositivas implementado por JS. Compártelo para su referencia, como sigue:
HTML:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> puro js version </title> <style type = "text/css">*{margin Pading: 0;}#banner {ancho: 1000px; text-align: izquierda; Antecedentes: #ffff; margen: 0 auto;}#banner img {display: block; float: izquierda;}. mainbox {desbordamiento: oculto; posición: relativa;}. Flashbox {desbordamiento: oculto; posición: relativa;}. ImageBox {text-align: right; posición: relativa; z-index: 999;}. bitdiv {display: inline-block; ancho: 18px; altura: 18px; margin: 0 10px 10px 0px; cursor: pointer; float: right;}. Defimg { background:url(styles/images/ppt_icon2.png);}.curimg{background:url(styles/images/ppt_icon1.png);}</style><script type="text/javascript" src="styles/js/ppt_ban.js"></script></head><body><div id="banner"> <script> var box = nuevo pptbox (); box.width = 1000; // width box.height = 226; // Height Box.autoplayer = 3; // Tiempo de intervalo automático // box.add ({"url": "dirección de imagen", "título": "Título de Hoom", "href": "dirección de enlace"}) box.add ({"url": "Styles/Images/FCK_04.jpg", "Href": "###", "Título": "Hoom Prontation Title 1"}); box.add ({"url": "Styles/Images/FCK_04.jpg", "Href": "###", "Título": "Hoom Prontation Title 1"}); box.add ({"url": "Styles/Images/FCK_04.jpg", "href": "###", "Título": "Título de la solicitud de suspensión 1"}); box.add ({"url": "Styles/Images/FCK_04.jpg", "href": "###", "Título": "Título de la solicitud de suspensión 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; // ancho this.height = 300; // altura this.picwidth = 15; // ancho de imagen pequeña this.picheight = 12; // altura de imagen pequeña this.autoplayer = 4; // interval de autoplay (segundos) 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; altura:"+(this.height)+"px;'>"; html+= "<div id = '"+this.uid+"_ flashbox' class = 'flashbox' style = 'width:"+flashboxwidth+"px; height:"+(this.height)+"px;'> </div>"; html+= "<div id = '"+this.uid+"_ ImageBox' class = 'ImageBox' style = 'Width:"+this.width+"px; Height:"+(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 = ""; for (var i = 0; i <this._box.length; i ++) {var parámetro = 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 =/"+EventsTr+". MouseOverpic ("+i+")/"> </div>"+imageHtml; ClearInterval (this._auToPlay); setInterval (eventStr, this.auToPlayer*1000); classID = 'clsid: d27cdb6e-ae6d-11cf-96b8-4444553540000' "+" codebase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width = '" altura = '"+altura+"'> "+" <param name =/"Movie/" value = "+url+"/"/>"+"<param name = 'Quality' value = 'high'/>"+"<param name = 'wmode' value = 'transparent'>"+"<incrustar src = '+url+" calidad =' high 'wmode =' opAque '' pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'Application/x-shockwave-flash' height = '"+altura+"'> </bred> "+" </buncio> ";} else {var eventstr =" pptboxhelper.instance ["+this.uid+" "]"; if (this._box [idx] .href) {style = "cursor: pointer"} html = "<img src = '"+url+"' style = 'width:"+width+"px; altura:"+altura+"px;"+style+"' onclick =/"+eventstr+". Clickpic ("+"+"/"/" } return html; }, ChangeIndex: function (IDX) {var parámetro = 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: 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) {parámetro var = 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 eventstr = "pptboxhelper.instance ['"+this.uid+"'] ._ play ()"; this._autoPlay = setInterval (eventstr, this.auToPlayer*1000); }}} var pptboxHelper = {Count: 0, instancia: {}, getId: function () {return '_PPT_Box-'+(this.count ++); }}; función MoveLement (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 repetir = "MoveElement ('"+ElementId+"',"+final_x+","+intervalo+")"; elem.movement = setTimeOut (repetir, intervalo);}Las representaciones son las siguientes:
Para obtener más información sobre el contenido relacionado con JavaScript, consulte los temas de este sitio: "Resumen de los efectos y técnicas de conmutación de JavaScript", "Resumen de las técnicas de algoritmo de búsqueda de JavaScript", "Resumen de los efectos y técnicas de animación de JavaScript", "Resumen de errores de JavaScripts y técnicas de fuga", "resumido de las estructuras de datos de Javascript y las estructuras de datos de JavaScript y las técnicas de algscript", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ". "Resumen del uso de operaciones matemáticas de JavaScript"
Espero que este artículo sea útil para la programación de JavaScript de todos.