In diesem Artikel wird die Methode von JS beschrieben, um den Schalteffekt des Flash -Dias -Bildes zu realisieren. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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" Lang = "Zh-Cn">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<meta http-äquiv = "content-Sprache" content = "gb2312" />
<meta name = "Autor" content = "Rainoxu" />
<titels> JS Simulates Flash -Dias -Bild -Switching -Effekt </title>
</head>
<body>
<style type = "text/css">
/ * <! [Cdata [ */
ul, li {
Polsterung: 0;
Rand: 0;
Listenstil: Keine;
}
#flashbox {
Breite: 326px;
Höhe: 246px;
Grenze: 1PX Solid #eee;
Position: Relativ;
}
#flashbox img {
/*Zeigen Sie anfangs nicht an*////
Anzeige: Keine;
/* Verwenden Sie Grenzen, um leere Räume zu erreichen, da Rand und Pading manchmal einige Probleme verursachen können*/
Grenze: 3px Solid #fff;
}
#flashbox ul {
Position: absolut;
Rechts: 7px;
unten: 9px;
Schriftart: 9px Tahoma;
}
#flashbox ul li {
Anzeige: Block;
float: links;
Breite: 12px;
Höhe: 12px;
Zeilenhöhe: 12px;
Rand-Rechts: 3px;
Grenze: 1PX Solid #999;
Hintergrund:#f0f0f0;
Text-Align: Mitte;
Cursor: Zeiger;
}
#flashbox ul li.hover {
Grenzfarbe: Rot;
Hintergrund:#ffe1e1;
Farbe: Rot;
}
/ *]]> */
</style>
<script type = "text/javaScript">
Funktion FlashBoxCtrl (o) {
this.obj = document.getElementById (o);
// Obwohl diese private Methode geschrieben wurde, ist sie noch nicht nützlich
Funktion addierener (ELE, Ereignisname, FunktionBody) {
if (ele.attachEvent) {
ele.attachevent ("on"+Ereignisname, FunktionBody);
} else if (ele.addeventListener) {
ele.addeventListener ("on"+Ereignisname, FunktionBody, False);
}anders{
false zurückgeben;
}
}
//Initialisierung
this.init = function () {
var objimg = this.obj.getElementsByTagName ("img");
var TagLength = objimg.length;
if (TagLength> 0) {
var Oul = document.createelement ("ul");
Oul.SetAttribute ("id", o+"numtag");
für (var i = 0; i <tagLength; i ++) {
var oli = OUl.AppendChild (document.createelement ("li"));
if (i == 0) {
oli.setattribute ("Klasse", "Hover"); // Setzen Sie die erste, die während der Initialisierung hervorgehoben wird
oli.setattribute ("className", "schwebe");
}
// Setzen Sie die Anzahl der Etiketten
oli.Appendchild (document.CreateTextNode ((i+1)));
}
this.obj.appendchild (OUL);
Objimg [0] .Style.Display = "Block";
// Tag -Ereignisse festlegen
var otag = this.obj.getElementsByTagName ("li");
für (var i = 0; i <otag.length; i ++) {
OTAG [i] .onmouseover = function () {
für (j = 0; j <otag.length; j ++) {
OTAG [j] .ClassName = "";
objimg [j] .style.display = "keine";
}
this.className = "Hover";
objimg [this.innerhtml-1] .style.display = "block";
}
}
}
};
// Die automatische Scrolling -Methode wurde noch nicht geschrieben
this.imgroll = function () {};
// Die Init () -Methode wird automatisch geladen, wenn ein Objekt zum Initialisieren des Objekts generiert wird
this.init ();
}
</script>
<div id = "FlashBox">
<img src = "/images/m02.jpg"/>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javaScript">
// ein Objekt generieren
New FlashBoxCtrl ("FlashBox");
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.