Cet article décrit l'effet de commutation de diapositive d'image que JS peut être appelé plusieurs fois sur la même page. 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">
<adal>
<title> Effet de commutation de diapositive d'image JS qui peut être appelé plusieurs fois sur la même page </TITME>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
<! - Ajoutez le code suivant entre <A-Head> et </ Head> ->
<script linguisse = "javascript">
// Déclarer l'espace de noms
var $ o = nouvel objet ();
// Méthode de base
$ o.base = {
e: fonction (a, f) {
pour (var i = 0, j = a.length; i <j; i ++) {f.call (a [i], i);}
}
}
$ o. Slide = fonction (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; padding: 0; list-style: Aucun; affichage: bloc; position: absolu; en bas: 10px; à droite: 10px;">'],
index = 0,
$ = null,
$ = null;
Changement de fonction (i) {
if (!! $) {ClearTimeout ($);}
index =! isnan (i)? i: index + 1;
if (index> = a.length) {index = 0;}
$ o.base.e (lis, fonction (k) {if (k == index) {c (1, this);} else {c (0, this)}});
var à = - index * h;
if (a [0] .offsetTop == to) {
retour;
}autre{
if (!! $) {ClearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .offsetTop;
v = math [à <ot? 'plancher': 'ceil'] ((à - ot) * 0,2);
if (ot == to) {ClearInterval ($); $ = null; st ();}
ot + = v;
a [0] .Style.Margintop = ot + "px";
}, 30)
};
}
fonction c (b, o) {
o.style.backgroundColor = !! B? Cl: "# fff";
o.style.color = !! b? "# fff": cl;
}
fonction st () {
if (!! $) ClearTimeout ($);
$ = setTimeout (function () {change ()}, ctm);
}
avec (t.style) {overflow = 'Hidden'; position = 'relative';}
$ o.base.e (a, fonction (n) {
this.style.display = "bloc";
avec (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, fonction (n) {
if (n == index) {c (1, this)}
this.onMouseOver = function () {
if (n! = index) modifier (n);
}
});
St();
}
</cript>
</ head>
<body>
<! - Ajoutez le code suivant entre <body> et </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 linguisse = "javascript">
nouveau $ o.slide ("aa");
</cript>
<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 linguisse = "javascript">
new $ o.slide ("bb", {couleur: '# 000', heure: 0,2});
</cript>
<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 linguisse = "javascript">
new $ o.slide ("cc", {couleur: 'vert'});
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.