欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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