Este artículo describe el efecto de conmutación de diapositivas de imagen que JS se puede llamar varias veces en la misma página. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<title> JS Efecto de conmutación de diapositivas de imagen que se puede llamar varias veces en la misma página </title>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
<
<script language = "javaScript">
// Declarar el espacio de nombres
var $ o = nuevo objeto ();
// Método básico
$ o.base = {
e: función (a, f) {
para (var i = 0, j = a.length; i <j; i ++) {f.call (a [i], i);}
}
}
$ o. slide = function (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 = "margen: 0; relleno: 0; estilo list: ninguna; pantalla: bloque; posición: absoluto; abajo: 10px; derecha: 10px;">'],
índice = 0,
$ = nulo,
$ = nulo;
cambio de función (i) {
if (!! $) {ClearTimeOut ($);}
índice =! isnan (i)? I: índice+1;
if (index> = a.length) {index = 0;}
$ o.base.e (lis, function (k) {if (k == index) {c (1, this);} else {c (0, this)}});
var a = - índice*h;
if (a [0] .OffSettop == a) {
devolver;
}demás{
if (!! $) {ClearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .OffSettop;
v = matemáticas [a <ot? 'piso': 'ceil'] ((a - ot)*0.2);
if (ot == to) {clearInterval ($); $ = null; st ();}
OT += V;
a [0] .style.margintop = ot + "px";
}, 30)
};
}
función c (b, o) {
o.style.backgroundcolor = !! b? cl: "#fff";
o.style.color = !! b? "#fff": cl;
}
función st () {
if (!! $ $) claro tiempo ($);
$ = setTimeOut (function () {cambie ()}, ctm);
}
con (T.Style) {Overflow = 'Hidden'; Position = 'relativo';}
$ o.base.e (a, función (n) {
this.style.display = "bloque";
con (this.firstchild.style) {borderWidth = '0'; width = w + 'px'; height = h + 'px';}
b.push ('<li>' + (n + 1) + '</li>');
});
b.push ('</ul>');
t.innerhtml += b.Join ("");
lis = t.getElementsBytagName ("li");
$ o.base.e (lis, function (n) {
if (n == index) {c (1, esto)}
this.onmouseover = function () {
if (n! = index) cambio (n);
}
});
calle();
}
</script>
</ablo>
<Body>
<!-Agregue el siguiente código entre <body> y </body>->
<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 = "/images/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">
nuevo $ o.slide ("aa");
</script>
<br>
<div id = "bb">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/imágenes/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/imágenes/4.jpg"> </a>
<a href = "###"> <img src = "/imágenes/5.jpg"> </a>
</div>
<script language = "javaScript">
nuevo $ o.slide ("bb", {color: '#000', tiempo: 0.2});
</script>
<br>
<div id = "cc">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/imágenes/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/imágenes/4.jpg"> </a>
<a href = "###"> <img src = "/imágenes/5.jpg"> </a>
</div>
<script language = "javaScript">
nuevo $ o.slide ("cc", {color: 'verde'});
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.