Este artigo descreve o efeito de exibição de comutação de slides implementado pelo JS. Compartilhe -o para sua referência, como segue:
html:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> versão do slides pura JS: "title; preenchimento: 0;}#banner {width: 1000px; text-align: esquerda; Antecedentes: #ffff; margem: 0 auto;}#banner img {display: block; Float: Esquerda;}. MainBox {Overflow: Hidden; Posição: relativa;}. FlashBox {Overflow: Hidden; Posição: relativa;}. ImageBox {Text-align: direita; posição: relativa; z-index: 999;}. bitdiv {display: block inline; largura: 18px; altura: 18px; margem: 0 10px 10px 0px; Cursor: poInter; float: direita;}. Antecedentes: url (estilos/imagens/ppt_icon2.png);}. Curimg {background: url (estilos/imagens/ppt_icon1.png);} </style> <script type = "text/javascript" src = "styles/js/ppt_ban.js" </script> = novo pptBox (); box.width = 1000; // Lidth box.Height = 226; // altura box.autoPlayer = 3; // tempo de intervalo automático // box.add ({"url": "endereço da imagem", "título": "título hoom", "href": "link endereço"}) box.add ({"url": "estilos/imagens/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({"url": "estilos/imagens/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({"url": "styles/imagens/fck_04.jpg", "href": "###", "title": "suspensão título 1"}); box.add ({"url": "styles/imagens/fck_04.jpg", "href": "###", "title": "suspensão título 1"}); box.show (); </script> </div> </body> </html>JS:
function pptbox () {this.uid = pptboxhelper.getId (); Pptboxhelper.instance [this.uid] = this; este ._ $ = function (id) {return document.getElementById (id);}; this.width = 400; // largura this.Height = 300; // altura this.picwidth = 15; // largura da imagem pequena this.picheight = 12; // altura da imagem pequena this.autoplayer = 4; // intervalo automático (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; altura:"+(this.Height)+"px;'> </div>"; html+= "<div id = '"+this.uid+"_ imagebox' class = 'imagebox' style = 'width:"+this.width+"px; altura:"+(this.picheight)+"px; topo:-"+(this.picheight+20)+"px;'> </div>"; html += "</div>"; document.write (html); }, _init: function () {var picstyle = ""; var eventtr = "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); imagehtml = "<div class = 'bitdiv"+((i == 0)? "Curimg": "DEFIMG")+"' title ="+parame.title+"src = 'bit01.gif'"+picstyle+"onClick = //"+events furts".clickpical(" OnMouseOver =/"Eventstr+". MouseOrpic ("+I+")/" ClearInterval (this._autoplay); SetInterval (eventstr, this.autoPlayer*1000); ClassID = 'CLSID: D27CDB6E-AE6D-11CF-96B8-444553540000' "+" CodeBase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cromedia.com/pub/shockwave/cabs/flash/swflash.cromedia.com/pub/shockwave/cabs/flash/swflash.cromedia.com/pub/shockwave/chash/flash/swflash.cromedia.com/pub/shockwave/cabs/flash/swflash.cab) altura = '' "+altura+" '> "+" <nome do param =/"filme/" value =/"+url+"/"/>"+"<param name =' Quality 'value =' High '/>"+"<nome do nome' 'wmode' value = 'transparent'>"+"<bed src = '+url+"' ' pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'Application/x-shockwave-flash' altura = '"+altura+"'> </incorp> "+" </ject> ";} else {var events =" pptboxhid.inStance; if (this._box [idx] .href) {style = "cursor: pointer"} html = "<img src = '" "+url+"' style = 'width: "+width+" px; altura: "+altura+" px; "+style+"' onClick =/""+eventStr+". } retornar 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; }, mostre: 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, instância: {}, getId: function () {return '_ppt_box-'+(this.count ++); }}; função movelement (elementId, final_x, interval) {if (! document.getElementById) retornar false; if (! document.getElementById (elementId)) retorna 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 repent = "moveElement ('"+elementId+"'," Final_x+","+interval+")"; elem.moVement = setTimeout (repetir, intervalo);}As renderizações são as seguintes:
Para obter mais informações sobre o conteúdo relacionado ao JavaScript, consulte os tópicos deste site: "Resumo dos efeitos e técnicas de comutação de JavaScript", "Resumo dos Javascript Search Algorithm Techniques", "Resumo de Efeitos e Técnicas de Animação de Javscript" Summary Of Javolcript Errors e Techugging Techniques "" "Resumo do uso de operações matemáticas JavaScript"
Espero que este artigo seja útil para a programação JavaScript de todos.