Dieser Artikel beschreibt den Effekt des Abbiegers von Diashows in JS. Teilen Sie es für Ihre Referenz wie folgt weiter:
<body> <script language = "javaScript" Typ = "text/javaScript"> <!-/************************************************************************************************************************************************************************************** PimgPlayer.additem ("Test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); PimgPlayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/Logo4.jpg"); PimgPlayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/Logo3.jpg"); PimgPlayer.init ("ImgPlayer", 200, 230); Anmerkungen: Geeignet für Orte, an denen nur ein Bildkarousel auf einer Seite ist. Objid, W, H, Zeit) {this.Intervaltime = Zeit || this.intervaltime; this._container = document.getElementById (objid); this._container.style.display = "block"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "relativ"; this._container.style.overflow = "Hidden"; //this._container.style.border = "1px Solid #fff"; var linkStyle = "Anzeige: Block; Textdekoration: Keine;"; if (document.all) {linkStyle += "filter:"; linkStyle += "progid: dimaMagetransform.microsoft.barn (duration = 0,5, motion = 'out', orientation = 'vertikal')"; linkStyle += "progid: dimaMagetransform.microsoft.barn (duration = 0,5, motion = 'out', orientation = 'horizontal')"; linkStyle += "progid: dimaMagetransform.microsoft.Blinds (Dauer = 0,5, Bands = 10, Direction = 'Down')"; linkStyle += "progid: dimaMagetransform.microsoft.Checkerboard ()"; linkStyle += "progid: dimaTransform.microsoft.fade (Dauer = 0,5, Überlappung = 0)"; linkStyle += "progid: dimaMagetransform.microsoft.gradientWipe (Dauer = 1, Gradientize = 1,0, motion = 'reverse')"; linkStyle += "progid: dimaMagetransform.microsoft.inset ()"; linkStyle += "progid: dimaMagetransform.microsoft.iris (duration = 1, irisStyle = plus, motion = out)"; linkStyle += "progid: dimaMagetransform.microsoft.iris (Duration = 1, irisStyle = plus, motion = in)"; linkStyle += "progid: dimaMagetransform.microsoft.iris (duration = 1, irisStyle = diamond, motion = in)"; linkStyle += "progid: dimaMagetransform.microsoft.iris (duration = 1, irisStyle = diamond, motion = in)"; linkStyle += "progid: dimaMagetransform.microsoft.iris (Dauer = 1, IrisStyle = Square, Motion = in)"; linkStyle += "progid: dimaMagetransform.microsoft.iris (Dauer = 0,5, IrisStyle = STAR, Motion = in)"; linkStyle += "progid: dimaMagetransform.microsoft.RadialWipe (Dauer = 0,5, Wipestyle = Uhr)"; linkStyle += "progid: dimaMagetransform.microsoft.RadialWipe (Dauer = 0,5, Wipestyle = Wedge)"; linkStyle += "progid: dimaMagetransform.microsoft.RadialWipe (Dauer = 0,5, Wipestyle = Wedge)"; linkStyle += "progid: dimaTransform.microsoft.Randombars (Dauer = 0,5, Orientierung = horizontal)"; linkStyle += "progid: dimaMagetransform.microsoft.Randombars (Dauer = 0,5, Orientierung = vertikal)"; linkStyle += "progid: dimaMagetransform.microsoft.RandomDissOLVE ()"; linkStyle += "progid: dimaMagetransform.microsoft.spiral (Dauer = 0,5, gridsizex = 16, gridsizey = 16)"; linkStyle += "progid: dimaMagetransform.microsoft.TRetch (Dauer = 0,5, StretchStyle = Push)"; linkStyle += "progid: dimaMagetransform.microsoft.strips (Dauer = 0,5, motion = rechts)"; linkStyle += "progid: dimaTransform.microsoft.Wheel (Dauer = 0,5, Speichen = 8)"; linkStyle += "progid: dimaTransform.microsoft.zigZag (Dauer = 0,5, gridsizex = 4, gridsizey = 40); Breite: 100%; Höhe: 100%"; } // var ulStyle = "Margin: 0; Breite:"+w+"px; Position: absolut; Z-Index: 999; rechts: 5px; Filter: Alpha (Opazität = 30, FinishoPacity = 90, Style = 1); Überlauf: Hidden; bottom: -1px; Höhe: 16px; Border-Light: 1px #Ff;;;;;; // var listyle = "Margin: 0; Listenstil-Typ: Keine; Margin: 0; Polster: 0; Float: Right;"; // var basspacStyle = "Clear: beide; Anzeige: Block; Breite: 23px; Zeilenhöhe: 18px; Schriftgröße: 12px; Schriftfamilie: '安'; Opazität: 0,6;"; BasispacStyle += "Grenze: 1px solide #fff; Grenzrechte: 0; Border-Bottom: 0;"; BasisspacStyle += "Farbe: #fff; Text-Align: Mitte; Cursor: Zeiger;"; // var ulhtml = ""; für (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {spanStyle = basespacStyle + "Hintergrund:#ff0000;"; // Initialisieren Sie die Farbe der unteren Nummer} else {spanStyle = baseSpacStyle + "Hintergrund:#C0C0C0;"; // Initialisieren Sie die Hintergrundfarbe der unteren Zahl} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<span onmouseover =/" pimgPlayer.mouseover (this);/"onmouseout =/" pimgPlayer.Mouseout (this);/"style =/"+spanstyle+"/" onclick =/"pimgPlayer.play ("+i+"); this._items [i] .title+"/"> "+(i+1)+" </span> "; Ulhtml+=" </li> ";} // var html =" <a href =/""+this._items [this.index] .Link+"/" title target =/"_ leer/" style =/"+linkStyle+"/"> </a> <ul style =/"+ulstyle+"/"> "+ulhtml+" </ul> "; this._container.innerhtml = html; var link = this._container.getElementsByTagName ("a") [0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url (' + this._items [0] .img + ') No-Repeat Center Center'; // this._timer = setInterval ("pimgPlayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, link: _link, img: _imgurl}); var img = new Image (); img.src = _imgurl; this._imgs.push (IMG); }, abspielen: function (index) {if (index! = null) {this._index = index; ClearInterval (this._timer); this._timer = setInterval ("pimgPlayer.play ()", this.Intervaltime); } else {this._index = this._index <this._items.length-1? this._index+1: 0; } var link = this._container.getElementsByTagName ("a") [0]; if (link.Filters) {var ren = math.floor (math.random ()*(link.Filters.length)); link.Filters [ren] .Apply (); link.filters [ren] .play (); } link.href = this._items [this.index] .Link; link.title = this._items [this._index] .title; link.style.background = 'url (' + this._items [this.index] .img + ') No-Repeat Center Center'; // var listyle = "Margin: 0; Listenstil-Typ: Keine; Margin: 0; Polster: 0; Float: Right;"; var basspacStyle = "Clear: beide; Anzeige: Block; Breite: 23px; Zeilenhöhe: 18px; Schriftgröße: 12px; Schriftfamilie: '安'; Deckkraft: 0,6;"; BasispacStyle += "Grenze: 1px solide #fff; Grenzrechte: 0; Border-Bottom: 0;"; BasisspacStyle += "Farbe: #fff; Text-Align: Mitte; Cursor: Zeiger;"; var ulhtml = ""; für (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {spanStyle = basespacStyle + "Hintergrund:#ff0000;"; // Farbe der Zahlen} else {SpanStyle = BasespacStyle + "Hintergrund:#C0C0C0;"; // Hintergrundfarbe der Zahlen} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<span onmouseover =/" pimgPlayer.mouseover (this);/"onmouseout =/" pimgPlayer.Mouseout (this);/"style =/"+spanstyle+"/" onclick =/"pimgPlayer.play ("+i+"); this._items [i] .title + "/"> " + (i + 1) +" </span> "; ulhtml + =" </li> ";} this._container.getElementsByTagName (" ul ") [0] .Nerhtm = ulHtmL; if (this.index! = i-1) {obj.style.color = "#ff0000"; "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.