บทความนี้อธิบายวิธีการสลับรูปภาพแบบไดนามิกโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
ไฟล์ index.css มีดังนี้:
คัดลอกรหัสดังนี้:* {
มาร์จิ้น: 0px; การตอบสนอง: 0px;
-
ร่างกาย {
ความกว้าง: 632px;
/*พื้นหลังสี: สีน้ำเงิน;*/
มาร์จิ้น: 0 อัตโนมัติ;
-
#IMGSCOM {
พื้นหลังสี: สีเหลือง;
/*การวางตำแหน่งสัมพัทธ์เพื่อใช้การวางตำแหน่งสัมบูรณ์ในชั้นล่างใช้ต้นกำเนิดของ div นี้เป็นต้นกำเนิด*/
ตำแหน่ง: ญาติ;
-
#Uulnav {
ประเภทรายการประเภท: ไม่มี;
ตำแหน่ง: สัมบูรณ์;
/*ใช้ IMGSCOM เป็นจุดกำเนิดเพื่อค้นหาที่มุมล่างขวาอย่างแน่นอน*//
ด้านล่าง: 0px;
ขวา: 0px;
-
#Uulnav li {
ประเภทรายการประเภท: ไม่มี;
ลอย: ซ้าย;
พื้นหลังสี: ดำ;
สี: สีขาว;
มาร์จิ้น-ขวา: 5px;
ความกว้าง: 20px;
ความสูง: 20px;
ความสูงของสาย: 20px;
TEXT-ALIGN: CENTER;
เคอร์เซอร์: ตัวชี้;
-
index.html มีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS, CSS สลับรูปภาพแบบไดนามิก </title>
<link href = "css /index.css" rel = "stylesheet" />>>> >>
<script type = "text/javascript">
ฟังก์ชันเจล (id) {
ส่งคืน document.getElementById (id);
-
ฟังก์ชั่น clearlibg () {
var mylis = gel ("ulnav"). เด็ก;
สำหรับ (var i = 0; i <mylis.length; i ++) {
ถ้า (mylis [i] .nodeType == 1) {
mylis [i]. style.backgroundColor = "Black";
-
-
-
window.onload = function () {
// ระบุแอตทริบิวต์สำหรับทั้งสาม li
var lis = gel ("ulnav"). เด็ก;
สำหรับ (var i = 0; i <lis.length; i ++) {
ถ้า (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
// แทนที่รูปภาพ
เจล ("myimg"). setattribute ("src", "images/" + this.innerhtml + ".png");
// การกู้คืนสีทั้งหมด
Clearlibg ();
// แทนที่สีของฉลากพื้นหลัง LI
this.style.backgroundColor = "Silver";
-
-
-
-
</script>
</head>
<body>
<div id = "imgscom">
<img src = "images /1.png" id = "myimg" />>>
<ul id = "Ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน