JS点击链接切换图片，代码详解

admin · 发表于 2016-7-28 13:52:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS点击图片切换</title>
</head>
<body>
<script>
function showPic(whichpic) {
var source = whichpic.getAttribute('href'); //获取href的属性值
var placeholder = document.getElementById('placeholder'); //获取id值为“placeholder”的节点，返回值为对象
placeholder.setAttribute('src', source); //重新设置id值所在节点的src图片路径
}
</script>
<h1>JS点击图片切换测试</h1>
<ul>
<li><a href="images/1.jpg" title="这是第一张图片" onclick="showPic(this); return false;">第一张</a></li>
<li><a href="images/2.jpg" title="这是第二张图片" onclick="showPic(this); return false;">第二张</a></li>
<li><a href="images/3.jpg" title="这是第三张图片" onclick="showPic(this); return false;">第三张</a></li>
<li><a href="images/4.jpg" title="这是第四张图片" onclick="showPic(this); return false;">第四张</a></li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="这是一张默认的图片">
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[基础语法] JS点击链接切换图片，代码详解