Artikel ini menjelaskan efek switching slide gambar yang dapat dipanggil JS beberapa kali pada halaman yang sama. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS Effect switching slide gambar yang dapat dipanggil beberapa kali pada halaman yang sama </iteme>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
<!-Tambahkan kode berikut antara <head> dan </head>->
<bahasa skrip = "javascript">
// Nyatakan namespace
var $ o = objek baru ();
// Metode Dasar
$ o.base = {
e: function (a, f) {
untuk (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 gaya = "margin: 0; padding: 0; Daftar-gaya: Tidak ada; tampilan: blok; posisi: absolute; bawah: 10px; kanan: 10px;">'],
indeks = 0,
$ = null,
$ = null;
fungsi perubahan (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) {
kembali;
}kalau tidak{
if (!! $) {clearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .offsettop;
v = matematika [ke <OT? 'Lantai': 'ceil'] ((ke - ot)*0.2);
if (ot == to) {clearInterval ($); $ = null; st ();}
OT += V;
a [0] .style.margintop = ot + "px";
}, 30)
};
}
fungsi c (b, o) {
o.style.backgroundColor = !! b? Cl: "#fff";
o.style.color = !! b? "#fff": cl;
}
fungsi st () {
if (!! $) clearTimeout ($);
$ = setTimeout (function () {ubah ()}, ctm);
}
dengan (t.style) {overflow = 'tersembunyi'; position = 'relatif';}
$ o.base.e (a, fungsi (n) {
this.style.display = "block";
dengan (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, this)}
this.onmouseover = function () {
if (n! = index) ubah (n);
}
});
st ();
}
</script>
</head>
<body>
<!-Tambahkan kode berikut antara <body> dan </body>->
<Div id = "aa">
<a href = "JavaScript: alert ('1')"> <img src = "/gambar/1.jpg"> </a>
<a href = "javascript: alert ('2')"> <img src = "/gambar/2.jpg"> </a>
<a href = "JavaScript: alert ('3')"> <img src = "/gambar/3.jpg"> </a>
<a href = "JavaScript: alert ('4')"> <img src = "/gambar/4.jpg"> </a>
<a href = "javascript: alert ('5')"> <img src = "/gambar/5.jpg"> </a>
<a href = "JavaScript: alert ('6')"> <img src = "/gambar/6.jpg"> </a>
<a href = "javascript: alert ('7')"> <img src = "/gambar/7.jpg"> </a>
<a href = "javascript: alert ('8')"> <img src = "/gambar/8.jpg"> </a>
<a href = "JavaScript: alert ('9')"> <img src = "/gambar/9.jpg"> </a>
</div>
<bahasa skrip = "javascript">
$ O.Slide baru ("AA");
</script>
<br>
<Div id = "bb">
<a href = "###"> <img src = "/gambar/1.jpg"> </a>
<a href = "###"> <img src = "/gambar/2.jpg"> </a>
<a href = "###"> <img src = "/gambar/3.jpg"> </a>
<a href = "###"> <img src = "/gambar/4.jpg"> </a>
<a href = "###"> <img src = "/gambar/5.jpg"> </a>
</div>
<bahasa skrip = "javascript">
$ O.Slide baru ("bb", {color: '#000', waktu: 0.2});
</script>
<br>
<Div id = "cc">
<a href = "###"> <img src = "/gambar/1.jpg"> </a>
<a href = "###"> <img src = "/gambar/2.jpg"> </a>
<a href = "###"> <img src = "/gambar/3.jpg"> </a>
<a href = "###"> <img src = "/gambar/4.jpg"> </a>
<a href = "###"> <img src = "/gambar/5.jpg"> </a>
</div>
<bahasa skrip = "javascript">
$ O.Slide baru ("cc", {color: 'green'});
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.