Artikel ini menjelaskan metode pengalihan gambar secara dinamis oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
File index.css adalah sebagai berikut:
Salin kode sebagai berikut:* {
margin: 0px; padding: 0px;
}
tubuh {
Lebar: 632px;
/*latar belakang-warna: biru;*/
margin: 0 otomatis;
}
#imgscom {
Latar Belakang-Color: Kuning;
/*Penentuan posisi relatif, untuk menggunakan posisi absolut di lapisan bawah, gunakan asal div ini sebagai asal*/
Posisi: kerabat;
}
#ulnav {
Daftar-gaya-tipe: tidak ada;
Posisi: Absolute;
/*Gunakan imgscom sebagai asal untuk benar -benar menemukan ke sudut kanan bawah*/
Bawah: 0px;
Kanan: 0px;
}
#ulnav li {
Daftar-gaya-tipe: tidak ada;
float: kiri;
Latar Belakang: Hitam;
Warna: Putih;
margin-kanan: 5px;
Lebar: 20px;
Tinggi: 20px;
Line-Height: 20px;
Teks-Align: tengah;
kursor: pointer;
}
Index.html adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> js, css secara dinamis beralih gambar </iteme>
<tautan href = "css /index.css" rel = "stylesheet" />
<type skrip = "Teks/JavaScript">
fungsi gel (id) {
return document.getElementById (id);
}
fungsi clearlibg () {
var mylis = gel ("ulnav"). Childnodes;
untuk (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .nodetype == 1) {
mylis [i] .style.backgroundColor = "hitam";
}
}
}
window.onload = function () {
// Tentukan atribut untuk ketiganya Li
var lis = gel ("ulnav"). Childnodes;
untuk (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodetype == 1) {
lis [i] .onClick = function () {
// ganti gambarnya
gel ("myimg"). setattribute ("src", "images/" + this.innerHtml + ".png");
// semua warna li pemulihan
clearlibg ();
// ganti warna label latar Li
this.style.backgroundColor = "silver";
};
}
}
};
</script>
</head>
<body>
<Div id = "imgscom">
<img src = "gambar /1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.