I used my free time to write an example of browsing a single image when I was learning JavaScript:
The code copy is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Image Gallery </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
</HEAD>
<script language="javascript">
function showPic(whichpic){
var source=whichpic.getAttribute("href");//Get the value of the attribute href of the element currently clicked
var placeholder=document.getElementById("placeholder");//Get the target
placeholder.setAttribute("src",source);//Set the target attribute src to change the picture
var text=whichpic.getAttribute("title");//Get the value of the attribute title of the element currently clicked
var description=document.getElementById("description");
description.firstChild.nodeValue=text;// Assign the title of the click element to <p>
//or description.childNodes[0].nodeValue=text;
}
</script>
<BODY>
<h1>Javascript Picture Gallery</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;">Picture 2</a>
</li>
<li>
<a href="images/rose.jpg" onclick="showPic(this); return false;">Pic three</a>
</li>
<li>
<a href="images/bigben.jpg" onclick="showPic(this); return false;">Picture 4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" />
<p id="description">Select picture.</p>
</BODY>
</HTML>
Notice:
We should pay attention to adding events to the tag <a></a> to avoid making it perform jumps.
Solution: The function returns false; the event believes that the link has not been clicked.
If the value of href is javascript:void(0); it can also not jump.