Cet article décrit l'effet d'affichage de commutation de diapositive implémenté par JS. Partagez-le pour votre référence, comme suit:
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"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> pure js slide version </tape> <style type = "text / css"> * {margin: 0; rembourrage: 0;} # bannière {width: 1000px; text-align: Left; Contexte: #FFFF; marge: 0 auto;} # bannière img {affichage: bloc; float: Left;}. Mainbox {Overflow: Hidden; Position: relative;}. Flashbox {Overflow: Hidden; Position: relative;}. ImageBox {text-adign: droite; position: relative; z-index: 999;}. BitDiv {affichage: block en ligne; largeur: 18px; hauteur: 18px; margin: 0 10px 10px 0px; cursor: pointer; float: droit;}. Defimg {. Contexte: 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"> </cript> </éadgot Pptbox (); Box.Width = 1000; // width box.height = 226; // height box.autoplayer = 3; // AutoPlay Interval time // box.add ({"url": "adresse d'image", "title": "hoom title", "href": "link adresse"}) box.add ({"URL": "Styles / Images / FCK_04.jpg", "Href": "###", "Title": "Hoom Invite Title 1"}); box.add ({"URL": "Styles / Images / FCK_04.jpg", "Href": "###", "Title": "Hoom Invite Title 1"}); box.add ({"URL": "Styles / Images / FCK_04.jpg", "Href": "###", "Title": "Titre de l'invite de suspension 1"}); box.add ({"URL": "Styles / Images / FCK_04.jpg", "Href": "###", "Title": "Titre de l'invite de suspension 1"}); box.show (); </cript> </div> </ body> </html>JS:
fonction pptbox () {this.uid = pptboxhelper.getId (); PptboxHelper.instance [this.uid] = this; this ._ $ = function (id) {return document.getElementById (id);}; this.width = 400; // width this.height = 300; // hauteur this.picwidth = 15; // petite image width this.picheight = 12; // petite hauteur d'image this.autoplayer = 4; // intervalle automatique (secondes) 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; height:" + (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 paramètre = 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 = /"+eventsstr+".clickpic("+i+" cons.)/" onMouseover = / "+ eventstr +". MouseOverpic ("+ i +") / "> </div>" + imagehtml;} ce ._ $ (this.uid + "_ Flashbox"). clearInterval (this._autoplay); setInterval (eventstr, this.AutoPlayer * 1000);}, flashhtml: fonction (url, largeur, hauteur, idx) {var isflash = url.substring (url.lastIndexof ('.') + 1) .tolowercase () == "Swf"; CLASSID = 'CLSID: D27CDB6E-AE6D-11CF-96B8-4445535400' "+" CodeBase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width = '+ width + "width +" height = '+ height + "'>" + "<param name = /" film / "value = /" + url + "/" /> "+" <param name = 'qualité' value = 'high' /> "+" <param name = 'wmode' value = 'transparent'> "+" <embed ' pluginspage = 'http: //www.macromedia.com/go/getflashplayer' + "type = 'application / x-shockwave-flash' height = '" + height + "'> </ embed>" + "</ object>";} else {var eventstr = "pptboxhelper.instance [" "+ this.uid +" "]" var = "; if (this._box [idx] .href) {style = "curseur: pointeur"} html = "<img src = '" + url + "' style = 'width:" + width + "px; height:" + height + "px;" + style + "' onclick = /" + eventstr + ". clickpic (" + idx + ") /" } return html; }, changeIndex: function (idx) {var paramètre = this._box [idx]; moveLelement (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; }, muouseOverpic: 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 paramètre = 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, instance: {}, getID: function () {return '_ppt_box-' + (this.count ++); }}; fonction moveLelement (elementId, final_x, interval) {if (! document.getElementById) return false; if (! Document.getElementById (elementId)) renvoie false; var elem = document.getElementById (élémentId); 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 repeat = "moveLelement ('" + elementId + "'," + final_x + "," + interval + ")"; elem.movement = setTimeout (répéter, intervalle);}Les rendus sont les suivants:
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de la recherche JavaScript", "Résumé des erreurs d'erreurs et de techniques de débogage JavaScript", "Résumé de Javascript. "Résumé de l'utilisation des opérations mathématiques JavaScript"
J'espère que cet article sera utile à la programmation JavaScript de tous.