实现点击小图展示大图
通过getElementById拿到标签更改其图片路径
<div>
<ul>
<li>
<a href="./images/15c95a1535b86c49f806f11bb43a2594.jpg" title="刘亦菲"
onclick="showPic(this);return false">
<img src="./images/15c95a1535b86c49f806f11bb43a2594.jpg"/>
</a>
</li>
<li>
<a href="./images/1fd69d587cb4493351c206b012fe937b.jpg" title="背影" onclick="showPic(this);return false">
<img src="./images/1fd69d587cb4493351c206b012fe937b.jpg"/>
</a>
</li>
</ul>
</div>
<div style="display:flex;">
<img id="image" src="./images/25057f7dddd19a810722e2233f6f2f4b.jpg" width="500px"/>
<p id="text">请选择</p>
</div>
<script>
function showPic(item) {
var img = document.getElementById("image")
img.src = item.href
var tex = document.getElementById("text")
tex.innerText = item.title
}
</script>

网友评论