Artikel ini menjelaskan metode JS untuk mewujudkan efek switching dari gambar flash slide. 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" lang = "zh-cn">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<meta http-equiv = "konten-bahasa" konten = "gb2312" />
<meta name = "penulis" konten = "rainoxu" />
<Title> JS mensimulasikan efek switching gambar slide flash </iteme>
</head>
<body>
<type style = "text/css">
/ * <! [CDATA [ */
ul, li {
Padding: 0;
Margin: 0;
List-style: tidak ada;
}
#flashbox {
Lebar: 326px;
Tinggi: 246px;
Perbatasan: 1px solid #eee;
Posisi: kerabat;
}
#flashbox img {
/*Tidak menunjukkan pada awalnya*/
Tampilan: Tidak Ada;
/* Gunakan batas untuk mencapai ruang kosong, karena margin dan bantalan terkadang dapat menyebabkan beberapa masalah*/
Perbatasan: 3px solid #fff;
}
#flashbox ul {
Posisi: Absolute;
Kanan: 7px;
Bawah: 9px;
Font: 9px Tahoma;
}
#flashbox ul li {
Tampilan: Blok;
float: kiri;
Lebar: 12px;
Tinggi: 12px;
Line-Height: 12px;
margin-kanan: 3px;
Perbatasan: 1px Solid #999;
Latar Belakang:#F0F0F0;
Teks-Align: tengah;
kursor: pointer;
}
#flashbox ul li.hover {
Border-color: merah;
Latar belakang:#ffe1e1;
Warna: Merah;
}
/ *]]> */
</tyle>
<type skrip = "Teks/JavaScript">
fungsi flashboxctrl (o) {
this.obj = document.getElementById (o);
// Meskipun metode pribadi ini telah ditulis, itu belum berguna
function addListener (ele, eventName, functionbody) {
if (eLe.AttachEvent) {
Ele.Attachevent ("On"+EventName, Functionbody);
} lain jika (ele.addeventListener) {
ele.addeventlistener ("on"+eventName, functionbody, false);
}kalau tidak{
mengembalikan false;
}
}
// Inisialisasi
this.init = function () {
var objimg = this.obj.getElementsByTagname ("img");
var taglength = objimg.length;
if (taglength> 0) {
var oul = document.createElement ("ul");
oul.setAttribute ("id", o+"numtag");
untuk (var i = 0; i <taglength; i ++) {
var oli = oul.AppendChild (document.createelement ("li"));
if (i == 0) {
Oli.setAttribute ("Kelas", "Hover"); // Atur yang pertama untuk disorot selama inisialisasi
Oli.setAttribute ("ClassName", "Hover");
}
// Atur jumlah label
Oli.AppendChild (Document.CreateTextNode ((i+1)));
}
this.obj.appendchild (oul);
objimg [0] .style.display = "block";
// Atur acara tag
var otag = this.obj.getElementsByTagname ("li");
untuk (var i = 0; i <otag.length; i ++) {
otag [i] .onmouseover = function () {
untuk (j = 0; j <otag.length; j ++) {
otag [j] .className = "";
objimg [j] .style.display = "tidak ada";
}
this.className = "hover";
objimg [this.innerhtml-1] .style.display = "block";
}
}
}
};
// Metode gulir otomatis belum ditulis
this.imgroll = function () {};
// Metode init () secara otomatis dimuat saat menghasilkan objek untuk menginisialisasi objek
this.init ();
}
</script>
<Div id = "flashbox">
<img src = "/gambar/m02.jpg"/>
<img src = "/gambar/m03.jpg"/>
<img src = "/gambar/m04.jpg"/>
<img src = "/gambar/m09.jpg"/>
</div>
<type skrip = "Teks/JavaScript">
// menghasilkan objek
flashboxctrl baru ("flashbox");
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.