ฉันใช้เวลาว่างในการเขียนตัวอย่างการท่องภาพเดียวเมื่อฉันเรียนรู้ JavaScript:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<head>
<title> แกลเลอรี่ภาพ </title>
<meta name = "generator" content = "EditPlus">
<meta name = "ผู้เขียน" content = "">
<meta name = "คำหลัก" content = "">
</head>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น showpic (ซึ่งเป็นอย่างไร) {
var source = wherepic.getattribute ("href"); // รับค่าของแอตทริบิวต์ href ขององค์ประกอบที่คลิกในปัจจุบัน
var placeholder = document.getElementById ("ตัวยึด"); // รับเป้าหมาย
PlaceHolder.SetAttribute ("SRC", แหล่งที่มา); // ตั้งค่าแอตทริบิวต์เป้าหมาย SRC เพื่อเปลี่ยนรูปภาพ
var text = wherepic.getattribute ("title"); // รับค่าของชื่อแอตทริบิวต์ขององค์ประกอบที่คลิกในปัจจุบัน
var description = document.getElementById ("คำอธิบาย");
description.firstchild.nodevalue = text; // กำหนดชื่อขององค์ประกอบคลิกให้ <p>
// หรือ description.childnodes [0] .nodevalue = text;
-
</script>
<body>
<H1> แกลเลอรี่รูปภาพ JavaScript </h1>
<ul>
<li>
<a href = "images/fireworks.jpg" onclick = "showpic (this); return false;"> pic1 </a>
</li>
<li>
<a href = "images/coffee.jpg" onclick = "showpic (this); return false;"> รูปภาพ 2 </a>
</li>
<li>
<a href = "images/rose.jpg" onclick = "showpic (this); return false;"> pic สาม </a>
</li>
<li>
<a href = "images/bigben.jpg" onclick = "showpic (this); return false;"> รูปภาพ 4 </a>
</li>
</ul>
<img id = "placeholder" src = "images /placeholder.gif" />
<p id = "คำอธิบาย"> เลือกรูปภาพ </p>
</body>
</html>
สังเกต:
เราควรให้ความสนใจกับการเพิ่มเหตุการณ์ในแท็ก <a> </a> เพื่อหลีกเลี่ยงการกระโดด
วิธีแก้ปัญหา: ฟังก์ชั่นส่งคืนเท็จ เหตุการณ์เชื่อว่าลิงก์ยังไม่ได้ถูกคลิก
หากค่าของ href เป็น JavaScript: void (0); มันไม่สามารถกระโดดได้