简单实现通过下拉菜单切换图片

最新推荐文章于 2022-12-27 16:40:31 发布

原创最新推荐文章于 2022-12-27 16:40:31 发布 · 2.8k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍如何通过HTML和JavaScript实现一个简单的功能，让用户通过下拉菜单选择不同的图片进行展示。首先创建下拉菜单，然后绑定事件监听器，根据用户的选择加载相应的图片资源，实现动态切换效果。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
	function show() {
	document.getElementById("headimg").src = document.getElementById("selection").value;
}
</script>
</head>
	<select id="selection" onchange="show()">
		<option value="img/1.jpg">1</option>
		<option value="img/2.jpg">2</option>
		<option value="img/3.jpg">3</option>
		<option value="img/4.jpg">4</option>
	 </select>
	<img id="headimg" src="img/1.jpg" alt="" />
<body>
</body>
</html>