我想说的
我比较菜（小声bb）
实现
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<script type="text/javascript" src="tupianku.js"></script>
</head>
<body>
<h1>Test</h1>
<ul>
<li >
<a href="1.jpg" onclick="showpic(this);
return false">image1</a>
</li>
<li>
<a href="2.jpg" onclick="showpic(this);
return false">image2</a>
</li>
<li>
<a href="3.jpg" onclick="showpic(this);
return false">image3</a>
</li>
</ul>
<img id="img123" src="https://cdn.elstec.cn/14/5.jpg">
</body>
</html>JS部分
function showpic(whitchpic) {
var bianliang = whitchpic.getAttribute("href");
var place = document.getElementById("img123");
place.setAttribute("src",bianliang);
}原理
创建一个函数名为 showpic ， whitchpic 为参数。whitchpic 通过调用 getAttribute ，把 "href" 作为参数传递给 getAttribute ，声明一个变量并把语句赋给它。
接下来获取占位图，需要在 html 部分进行修改。 <img> 元素添加 id ，调用 document.getElementById ，再次声明一个变量并把语句赋给它。最后通过 setAttribute 进行实现。
变量2.setAttribute("src",变量1);html部分中，都是采用 <a> 元素,添加处理函数 showpic(this); return false ，防止被带到新窗口。
效果
