JavaScript DOM编程艺术一个网页图片切换

最新推荐文章于 2018-07-23 08:44:00 发布

一只奔跑的_蜗牛

最新推荐文章于 2018-07-23 08:44:00 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript DOM编程艺术学习文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/mztcbuzqsmh/article/details/54070554

JavaScript DOM编程艺术学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的网页图片选择器示例，通过点击链接来显示不同的图片。此示例使用了基本的HTML和JavaScript实现，展示了如何利用JavaScript来动态更改页面上的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
</head>
<title>图片</title>
<body>
<h1>选择图片<h1>
<ul>
	<li>
		<a href="images/bigben.jpg" onclick="showPic(this);return false;">塔</a>
	</li>
	<li>
		<a href="images/coffee.jpg" onclick="showPic(this);return false;">咖啡</a>
	</li>
	<li>
		<a href="images/fireworks.jpg" onclick="showPic(this);return false;">烟花</a>
	</li>
	<li>
		<a href="images/rose.jpg" onclick="showPic(this);return false;">鲜花</a>
	</li>
	<img id="placeholder" src="images/placeholder.gif" />
</ul>
<script>
function showPic(whichPic)
{
	var source=whichPic.getAttribute("href");
	var placeholder=document.getElementById("placeholder");
	 placeholder.setAttribute("src",source);
}
</script>
</body>
</html>