【JS练习1】图片切换（包括注释）

最新推荐文章于 2022-02-15 22:19:44 发布

cyseria

最新推荐文章于 2022-02-15 22:19:44 发布

阅读量381

点赞数

分类专栏： HTML 文章标签： javascript

本文链接：https://blog.csdn.net/cyseria/article/details/37593173

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Images</title>
</head>
<body >
<h1>Snapshots </h1>
<ul>
	<li>
		<a href="images/1.jpg" title="111111" οnclick="showPic(this);return false;">11111</a>
	</li><!-- return false防止用户被带到目标链接 -->
	<li>
		<a href="images/2.jpg" title="222222" οnclick="showPic(this);return false;">22222</a>
	</li>
	<li>
		<a href="images/3.jpg" title="3333333" οnclick="showPic(this);return false;">33333</a>
	</li>
	<li>
		<a href="images/4.jpg" title="4444444" οnclick="showPic(this);return false;">44444</a>
	</li>
</ul>
<img id="placeholder" src="images/5.jpg" alt="placeholder" style="width:800px;height:500px">
<p id="description">Choose an image</p>
<script type="text/javascript">
function showPic(whichpic)
{
	var source=whichpic.getAttribute("href");
	var placeholder=document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	// 图片切换
	var description=document.getElementById("description");
	var text=whichpic.getAttribute("title");
	description.firstChild.nodeValue=text
	// 文字切换
}
</script>
</body>
</html>