用js实现的简单的点击小图片，显示对应的大图片

最新推荐文章于 2021-06-15 22:34:30 发布

courageFei

最新推荐文章于 2021-06-15 22:34:30 发布

阅读量1.8w

点赞数 13

分类专栏： JavaScript笔记

本文链接：https://blog.csdn.net/qq_36647038/article/details/81952723

版权

JavaScript笔记专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一个简单的网页图集展示效果实现方法。通过HTML与JavaScript结合，可以轻松地制作出点击小图显示大图的功能。该方法适用于快速搭建图集展示页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**以下是简单的点击小图，显示大图的代码。具体简单的解释在注释中。

<body>
  <div class="box">
    <ul id="gallary">
      <li>
        <a href="images/6信息.png" title="信息">
          <img src="images/6信息.png" alt="">
        </a>
      </li>
      <li>
        <a href="images/4浏览器.png" title="浏览器">
          <img src="images/4浏览器.png" alt="">
        </a>
      </li>
      <li>

        <a href="images/3备份.png" title="备份">
          <img src="images/3备份.png" alt="">
        </a>
      </li>
      <li>
        <a href="images/2主题.png" title="主题">
          <img src="images/2主题.png" alt="">
        </a>
      </li>
    </ul>
    <div style="clear: both;"></div>
    <img src="" alt="" class="show" id="image">
    <p id="des" style="text-align: center;">图片信息</p>
  </div>

  <script>
     //获取所有的a标签 
   var alA=document.getElementById("gallary").getElementsByTagName("a");
      //循环遍历所有a标签
   for(var i=0;i<alA.length;i++){
     //为a设置点击事件
     alA[i].onclick=function(){
         //把a标签中的href 中存储的图片路径给需要展示图片的标签。
         document.getElementById("image").src=this.href;
         //把a标签中存储的title中存储的内容给需要展示的标签。
         document.getElementById("des").innerText=this.title;
         //阻止a链接的默认跳转。
         return false;
     }
   }
  </script>
</body>