js图片库

时间:2024-03-31 17:06:56
<!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 :组织事件的默认行为发生——>跳转到图片窗口查看图片(这不是我们希望看到的)
js图片库