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

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

<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//为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>

效果图如下,点击那个图片,那个图片就会显示在大图的位置处。:
用js实现的简单的点击小图片,显示对应的大图片_第1张图片

你可能感兴趣的:(JavaScript笔记)