JS gallery
mark
Demand effect:
Pictures of linked pages are displayed on the page inside the picture box instead of opening a new page
//html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="../js/2019_9_14.js"></script>
</head>
<body>
<ul>
<li>
<a href="../img/001.jpg" title="A001" onclick="showPic(this);return false;">001</a>
</li>
<li>
<a href="../img/002.jpg" title="A002" onclick="showPic(this);return false;">002</a>
</li>
<li>
<a href="../img/003.jpg" title="A003" onclick="showPic(this);return false;">003</a>
</li>
<li>
<a href="../img/004.jpg" title="A004" onclick="showPic(this);return false;">004</a>
</li>
</ul>
<img id="img1" src="../img/x.jpg" alt="my image gallery" />
</body>
</html>
//js部分
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var a = document.getElementById("img1");
a.setAttribute("src",source);
}
childNodes
For all child elements get an element
nodeType
Gets the type attribute node
nodeValue
Acquiring attribute values of nodes
firstChild and lastChile property
The first element is used to extract the elements of the list and the last element