js实现简单的点击小图显示大图

最新推荐文章于 2024-08-21 23:57:05 发布

Empress。

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_44737279/article/details/94599299

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
     <div id="imagebox">
        <a href="images/11.png" title="111">
             < img src="1.png">
        </a>
        <a href="images/22.png" title="222">
             < img src="2.png">
        </a>
		
      </d>
    <div style="clear: both;"></div>
        < img id="image" src="">
    <p id="des" style="text-align:center;">选择一个图片</p>
  
<script>
//获取到所有的a标签
var imagebox = document.getElementById('imagebox');
var links = imagebox.getElementsByTagName('a');
//给所有的a标签注册事件
for(var i = 0;i<links.length;i++)
{
     var link = links[i];
   //注册事件
      link.onclick = function(){
   //切换图片
   //获取大的img标签
      var image = document.getElementById('image');
   //把当前点击的a标签的href赋值给img标签的src属性
      image.src = this.href;
      //设置p标签
	  var des = document.getElementById('des');
	  des.innerText = this.title;
   //取消a标签的默认行为
    return false;
   }
}

</script>

</body>
</html>