Cet article décrit la méthode de JS pour réaliser l'effet de commutation de l'image de diapositive flash. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<meta http-equiv = "content-lang" content = "gb2312" />
<méta name = "auteur" contenu = "rainoxu" />
<Title> JS simule l'effet de commutation de l'image de diapositive flash </TITAL>
</ head>
<body>
<style type = "text / css">
/ * <! [Cdata [* /
ul, li {
rembourrage: 0;
marge: 0;
Style de liste: aucun;
}
#flashbox {
Largeur: 326px;
Hauteur: 246px;
Border: 1px solide #eee;
Position: relative;
}
#flashbox img {
/ * Ne montrez pas initialement * /
Affichage: aucun;
/ * Utiliser les frontières pour réaliser des espaces vides, car la marge et le pading peuvent parfois causer des problèmes * /
Border: 3px solide #fff;
}
#flashbox ul {
Position: absolue;
À droite: 7px;
En bas: 9px;
Police: 9px Tahoma;
}
#flashbox ul li {
Affichage: bloc;
flottant: à gauche;
Largeur: 12px;
hauteur: 12px;
hauteur de ligne: 12px;
marge-droite: 3px;
Border: 1px solide # 999;
Contexte: # F0F0F0;
Texte-aligne: Centre;
curseur: pointeur;
}
#flashbox ul li.hover {
Color à la frontière: rouge;
Contexte: # ffe1e1;
Couleur: rouge;
}
/ *]]> * /
</ style>
<script type = "text / javascript">
fonction flashboxctrl (o) {
this.obj = document.getElementById (o);
// Bien que cette méthode privée ait été écrite, elle n'est pas utile pour le moment
fonction addListener (ele, eventname, functionbody) {
if (ele.attachevent) {
ele.attachevent ("on" + eventname, functionbody);
} else if (ele.addeventListener) {
ele.addeventListener ("on" + eventName, functionbody, false);
}autre{
retourne false;
}
}
// initialisation
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");
pour (var i = 0; i <taglength; i ++) {
var oli = oul.appendChild (document.CreateElement ("li"));
if (i == 0) {
oli.setAttribute ("class", "hover"); // Définissez le premier à mettre en évidence lors de l'initialisation
oli.setAttribute ("className", "Hover");
}
// définir le nombre d'étiquettes
oli.appendChild (document.CreateTextNode ((i + 1)));
}
this.obj.appendchild (oul);
objimg [0] .Style.display = "Block";
// Définir les événements de balise
var otag = this.obj.getElementsByTagName ("li");
for (var i = 0; i <otag.length; i ++) {
otag [i] .onMouseOver = function () {
pour (j = 0; j <otag.length; j ++) {
otag [j] .classname = "";
objimg [j] .style.display = "Aucun";
}
this.className = "Hover";
objimg [this.innerhtml-1] .style.display = "bloc";
}
}
}
};
// La méthode de défilement automatique n'a pas encore été écrite
this.imgroll = function () {};
// La méthode init () est automatiquement chargée lors de la génération d'un objet pour initialiser l'objet
this.init ();
}
</cript>
<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">
// générer un objet
nouveau flashboxctrl ("flashbox");
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.