Dieser Artikel beschreibt den Image -Slide -Switching -Effekt, dass JS mehrmals auf derselben Seite aufgerufen werden kann. 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">
<kopf>
<titels> JS Image Disias Switching -Effekt, der auf derselben Seite mehrfach aufgerufen werden kann. </title>
<meta http-äquiv = "content-type" content = "text/html; charSet = gb2312">
<!-Fügen Sie den folgenden Code zwischen <kopf> und </head>-> hinzu
<script Language = "JavaScript">
// den Namespace deklarieren
var $ o = neues Objekt ();
// grundlegende Methode
$ o.base = {
E: Funktion (a, f) {
für (var i = 0, j = A.Length; i <j; i ++) {f.call (a [i], i);}
}
}
$ o. Slide = Funktion (id, arg) {
var arg = arg || {},
t = document.getElementById (id),
a = t.getElementsByTagName ("a"),
lis = [],
cl = arg.Color || '#f30',
ctm = arg.time*1000 || 2000,
W = T.Clientwidth,
H = T.ClientHeight,
B = ['<ul style = "Margin: 0; Polster: 0; Listenstil: Keine; Anzeige: Block; Position: absolut; unten: 10px; rechts: 10px;">'],
Index = 0,,
$ = null,
$ = null;
Funktionsänderung (i) {
if (!! $) {Cleartimeout ($);}
index =! isnan (i)? i: index+1;
if (index> = a.Length) {index = 0;}
$ o.base.e (lis, function (k) {if (k == index) {c (1, this);} else {c (0, this)}});
var to = - index*h;
if (a [0] .offsettop == to) {
zurückkehren;
}anders{
if (!! $) {ClearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .offsettop;
v = math [bis <ot? 'floor': 'ceil'] ((to - ot)*0,2);
if (ot == bis) {ClearInterval ($); $ = null; st ();}
ot += v;
a [0] .style.margintop = ot + "px";
}, 30)
};
}
Funktion c (b, o) {
O.Style.backgroundColor = !! b? cl: "#fff";
O.Style.Color = !! b? "#fff": Cl;
}
Funktion st () {
if (!! $) Cleartimeout ($);
$ = setTimeout (function () {change ()}, ctm);
}
mit (T.Style) {overflow = 'Hidden'; Position = 'Relative';}
$ o.base.e (a, function (n) {
this.style.display = "block";
mit (this.firstchild.style) {borderwidth = '0'; width = w + 'px'; Höhe = H + 'px';}
b.push ('<li>' + (n + 1) + '</li>');
});
b.push ('</ul>');
t.innnerHtml += B.Join ("");
lis = t.getElementsByTagName ("li");
$ o.base.e (lis, function (n) {
if (n == index) {c (1, this)}
this.onmouseover = function () {
if (n! = index) wechseln (n);
}
});
st ();
}
</script>
</head>
<body>
<!-Fügen Sie den folgenden Code zwischen <body> und </body>-> hinzu
<div id = "aa">
<a href = "javaScript: alert ('1')"> <img src = "/images/1.jpg"> </a>
<a href = "javaScript: alert ('2')"> <img src = "/images/2.jpg"> </a>
<a href = "javaScript: alert ('3')"> <img src = "/bilder/3.jpg"> </a>
<a href = "javaScript: alert ('4')"> <img src = "/images/4.jpg"> </a>
<a href = "javaScript: alert ('5')"> <img src = "/images/5.jpg"> </a>
<a href = "javaScript: alert ('6')"> <img src = "/images/6.jpg"> </a>
<a href = "javaScript: alert ('7')"> <img src = "/images/7.jpg"> </a>
<a href = "javaScript: alert ('8')"> <img src = "/images/8.jpg"> </a>
<a href = "javaScript: alert ('9')"> <img src = "/images/9.jpg"> </a>
</div>
<script Language = "JavaScript">
neu $ o.slide ("aa");
</script>
<br>
<div id = "bb">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script Language = "JavaScript">
new $ o.slide ("bb", {color: '#000', Zeit: 0.2});
</script>
<br>
<div id = "cc">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script Language = "JavaScript">
neu $ o.slide ("cc", {color: 'green'});
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.