Este artigo descreve o efeito de comutação de slides de imagem que o JS pode ser chamado várias vezes na mesma página. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<título> JS Imagem Slide Switching Effect que pode ser chamado várias vezes na mesma página </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<!-Adicione o seguinte código entre <head> e </head>->
<Script Language = "JavaScript">
// Declare o espaço para nome
var $ o = new Object ();
// Método básico
$ o.base = {
e: function (a, f) {
for (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 = "margem: 0; preenchimento: 0; estilo de lista: nenhum; display: bloco; posição: absoluto; inferior: 10px; direita: 10px;">'],
índice = 0,
$ = null,
$ = null;
mudança de função (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 para = - índice*h;
if (a [0] .offSettop == to) {
retornar;
}outro{
if (!! $) {ClearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .offSettop;
v = matemática [para <ot? 'piso': 'teto'] ((para - ot)*0.2);
if (ot == to) {clearInterval ($); $ = null; st ();}
ot += v;
a [0] .style.margintop = OT + "px";
}, 30)
};
}
função c (b, o) {
O.style.backgroundColor = !! B? Cl: "#fff";
o.style.color = !! b? "#fff": cl;
}
function st () {
if (!! $) cleartimeout ($);
$ = setTimeout (function () {alteração ()}, ctm);
}
com (t.style) {overflow = 'hidden'; position = 'relativo';}
$ o.base.e (a, função (n) {
this.style.display = "bloco";
com (this.firstchild.style) {borderwidth = '0'; largura = w + 'px'; altura = 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, this)}
this.onMouseOver = function () {
if (n! = índice) alteração (n);
}
});
st ();
}
</script>
</head>
<Body>
<!-Adicione o seguinte código entre <body> e </body>->
<div id = "aa">
<a href = "javascript: alert ('1')"> <img src = "/imagens/1.jpg"> </a>
<a href = "javascript: alert ('2')"> <img src = "/imagens/2.jpg"> </a>
<a href = "javascript: alert ('3')"> <img src = "/imagens/3.jpg"> </a>
<a href = "javascript: alert ('4')"> <img src = "/imagens/4.jpg"> </a>
<a href = "javascript: alert ('5')"> <img src = "/imagens/5.jpg"> </a>
<a href = "javascript: alert ('6')"> <img src = "/imagens/6.jpg"> </a>
<a href = "javascript: alert ('7')"> <img src = "/imagens/7.jpg"> </a>
<a href = "javascript: alert ('8')"> <img src = "/imagens/8.jpg"> </a>
<a href = "javascript: alert ('9')"> <img src = "/imagens/9.jpg"> </a>
</div>
<Script Language = "JavaScript">
novo $ o.slide ("AA");
</script>
<br>
<div id = "bb">
<a href = "###"> <img src = "/imagens/1.jpg"> </a>
<a href = "###"> <img src = "/imagens/2.jpg"> </a>
<a href = "###"> <img src = "/imagens/3.jpg"> </a>
<a href = "###"> <img src = "/imagens/4.jpg"> </a>
<a href = "###"> <img src = "/imagens/5.jpg"> </a>
</div>
<Script Language = "JavaScript">
novo $ o.slide ("bb", {color: '#000', tempo: 0.2});
</script>
<br>
<div id = "cc">
<a href = "###"> <img src = "/imagens/1.jpg"> </a>
<a href = "###"> <img src = "/imagens/2.jpg"> </a>
<a href = "###"> <img src = "/imagens/3.jpg"> </a>
<a href = "###"> <img src = "/imagens/4.jpg"> </a>
<a href = "###"> <img src = "/imagens/5.jpg"> </a>
</div>
<Script Language = "JavaScript">
novo $ o.slide ("cc", {color: 'Green'});
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.