js图片库
程序员文章站
2023-04-05 21:02:31
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>js图片库</title>
<style>
li {
list-style-type: none;
}
#plac {
width: 400px;
height: 600px;
display: block;
margin-left: 50%;
margin-top: -150px;;
}
</style>
</head>
<body>
<h1>图片库</h1>
<ul>
<li><a href="img/02.jpg" onclick = "showpic(this); return false;" title="一只狗" >一只狗</a></li>
<li><a href="img/01.jpg" onclick = "showpic(this); return false;" title="汤圆">汤圆</a></li>
<li><a href="img/03.jpg" onclick = "showpic(this); return false;" title="一只猫">一只猫</a></li>
<li><a href="img/04.jpg" onclick = "showpic(this); return false;" title="西瓜">西瓜</a></li>
<img id="plac" src="img/05.jpg" alt="玄幻">
</ul>
<script>
function showpic(whichpic) {
var source = whichpic.getattribute("href");
var plac = document.getelementbyid("plac");
plac.setattribute("src",source);
}
</script>
</body>
</html>
js段代码：
var source = whichpic.getattribute("href"); 获取whichpic（形参）的href属性；
var plac = document.getelementbyid("plac"); 获取plac（id）的元素；
plac.setattribute("src",source); 改变plac的src属性的值，为source;
onclick = "showpic(this); return false;" onclick事件绑定showpic函数，形参this为该对象，此处指<a>元素节点； return false :组织事件的默认行为发生——>跳转到图片窗口查看图片（这不是我们希望看到的）
上一篇： 夏季养颜瘦身吃什么 什么水果更适合