html页面有div内多张连续的缩略图要求实现以下几点功能：1 点击图片后js自动载入对应图片的大图并再当前页面全屏显示。2 所有大图均可在大图模式下切换下一张和上一张在PC端显示切换按钮来切换移动端则用滑动切换。3 点击空白处或按ESC可退出大图模式回到页面。4 所有图片在载入时均采用懒加载模式。

以下是一个实现上述功能的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
  <style>
    .thumbnail {
      display: inline-block;
      margin: 10px;
      cursor: pointer;
    }
    .fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      text-align: center;
    }
    .fullscreen img {
      max-width: 90%;
      max-height: 90%;
      margin-top: 5%;
    }
    .fullscreen .prev, .fullscreen .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background-color: white;
      color: black;
      font-size: 20px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
    .fullscreen .prev {
      left: 10px;
    }
    .fullscreen .next {
      right: 10px;
    }
  </style>
</head>
<body>
  <div class="thumbnails">
    <div class="thumbnail">
      <img src="thumbnail1.jpg" data-fullsrc="fullsize1.jpg">
    </div>
    <div class="thumbnail">
      <img src="thumbnail2.jpg" data-fullsrc="fullsize2.jpg">
    </div>
    <div class="thumbnail">
      <img src="thumbnail3.jpg" data-fullsrc="fullsize3.jpg">
    </div>
    <!-- more thumbnails -->
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var thumbnails = document.querySelectorAll('.thumbnail');
      var fullscreen = document.createElement('div');
      fullscreen.className = 'fullscreen';
      var currentImageIndex;
      var images = [];

      function showFullscreenImage(index) {
        currentImageIndex = index;

        var img = document.createElement('img');
        img.src = images[index];
        fullscreen.innerHTML = '';
        fullscreen.appendChild(img);
        document.body.appendChild(fullscreen);
      }

      function hideFullscreenImage() {
        fullscreen.innerHTML = '';
        document.body.removeChild(fullscreen);
      }

      function loadFullImage(index) {
        var img = new Image();
        img.src = thumbnails[index].querySelector('img').getAttribute('data-fullsrc');
        img.onload = function() {
          images[index] = img.src;
          if (currentImageIndex === index) {
            showFullscreenImage(index);
          }
        };
      }

      function lazyLoadImages() {
        for (var i = 0; i < thumbnails.length; i++) {
          if (!thumbnails[i].classList.contains('loaded')) {
            if (isElementInViewport(thumbnails[i])) {
              loadFullImage(i);
              thumbnails[i].classList.add('loaded');
            }
          }
        }
      }

      function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }

      function showPrevImage() {
        if (currentImageIndex > 0) {
          showFullscreenImage(currentImageIndex - 1);
        }
      }

      function showNextImage() {
        if (currentImageIndex < images.length - 1) {
          showFullscreenImage(currentImageIndex + 1);
        }
      }

      window.addEventListener('scroll', lazyLoadImages);
      window.addEventListener('resize', lazyLoadImages);
      window.addEventListener('click', function(e) {
        if (e.target.classList.contains('thumbnail')) {
          var index = Array.prototype.indexOf.call(thumbnails, e.target);
          showFullscreenImage(index);
        } else if (e.target === fullscreen || e.target.tagName === 'IMG') {
          hideFullscreenImage();
        }
      });
      window.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          hideFullscreenImage();
        } else if (e.key === 'ArrowLeft') {
          showPrevImage();
        } else if (e.key === 'ArrowRight') {
          showNextImage();
        }
      });

      lazyLoadImages();
    });
  </script>
</body>
</html>

在上述示例代码中，每个缩略图都被包装在一个div.thumbnail元素中，并通过data-fullsrc属性指定对应的大图路径。点击缩略图时，会调用showFullscreenImage函数显示大图，并将其添加到页面中。点击空白处或按下ESC键时，调用hideFullscreenImage函数隐藏大图。切换按钮的功能由showPrevImage和showNextImage函数实现。懒加载功能通过lazyLoadImages函数实现，该函数会在滚动和窗口大小改变时自动调用。

请注意，上述示例代码仅提供了基本的实现思路，具体的样式和图片路径需要根据实际需求进行调整

html页面有div内多张连续的缩略图要求实现以下几点功能：1 点击图片后js自动载入对应图片的大图并再当前页面全屏显示。2 所有大图均可在大图模式下切换下一张和上一张在PC端显示切换按钮来切换移动端则用滑动切换。3 点击空白处或按ESC可退出大图模式回到页面。4 所有图片在载入时均采用懒加载模式。