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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .thumbnail {
      display: inline-block;
      width: 100px;
      height: 100px;
    }
    
    .fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      overflow: hidden;
    }
    
    .fullscreen img {
      max-width: 100%;
      max-height: 100%;
    }
    
    .prev, .next {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: white;
      cursor: pointer;
      z-index: 9999;
    }
    
    .prev {
      left: 20px;
    }
    
    .next {
      right: 20px;
    }
  </style>
</head>
<body>
  <div id="gallery">
    <div class="thumbnail">
      <img src="thumbnail1.jpg" data-src="image1.jpg" alt="Image 1">
    </div>
    <div class="thumbnail">
      <img src="thumbnail2.jpg" data-src="image2.jpg" alt="Image 2">
    </div>
    <div class="thumbnail">
      <img src="thumbnail3.jpg" data-src="image3.jpg" alt="Image 3">
    </div>
    <!-- Add more thumbnails here -->
  </div>

  <script>
    var thumbnails = document.querySelectorAll('.thumbnail');
    var fullscreen = document.createElement('div');
    var currentIndex = 0;

    function showFullscreenImage(index) {
      var img = document.createElement('img');
      img.src = thumbnails[index].querySelector('img').dataset.src;
      img.alt = thumbnails[index].querySelector('img').alt;

      fullscreen.innerHTML = '';
      fullscreen.appendChild(img);
      document.body.appendChild(fullscreen);
      document.addEventListener('keydown', closeFullscreenOnEsc);
    }

    function closeFullscreen() {
      fullscreen.innerHTML = '';
      document.body.removeChild(fullscreen);
      document.removeEventListener('keydown', closeFullscreenOnEsc);
    }

    function closeFullscreenOnEsc(event) {
      if (event.key === 'Escape') {
        closeFullscreen();
      }
    }

    function showPreviousImage() {
      currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
      showFullscreenImage(currentIndex);
    }

    function showNextImage() {
      currentIndex = (currentIndex + 1) % thumbnails.length;
      showFullscreenImage(currentIndex);
    }

    thumbnails.forEach(function(thumbnail, index) {
      thumbnail.addEventListener('click', function() {
        currentIndex = index;
        showFullscreenImage(currentIndex);
      });
    });

    document.addEventListener('click', function(event) {
      if (event.target === fullscreen) {
        closeFullscreen();
      }
    });

    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        showPreviousImage();
      } else if (event.key === 'ArrowRight') {
        showNextImage();
      }
    });

    document.addEventListener('touchstart', function(event) {
      var startX = event.changedTouches[0].clientX;

      document.addEventListener('touchend', function(event) {
        var endX = event.changedTouches[0].clientX;
        var difference = startX - endX;

        if (difference > 50) {
          showNextImage();
        } else if (difference < -50) {
          showPreviousImage();
        }
      }, { once: true });
    });

    fullscreen.addEventListener('touchstart', function(event) {
      event.preventDefault();
    });

    fullscreen.addEventListener('touchmove', function(event) {
      event.preventDefault();
    });

    var lazyImages = document.querySelectorAll('img[data-src]');

    function lazyLoadImage(image) {
      image.src = image.dataset.src;
      image.removeAttribute('data-src');
    }

    if ('IntersectionObserver' in window) {
      var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            lazyLoadImage(entry.target);
            lazyImageObserver.unobserve(entry.target);
          }
        });
      });

      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    } else {
      lazyImages.forEach(function(lazyImage) {
        lazyLoadImage(lazyImage);
      });
    }
  </script>
</body>
</html>

上述代码使用了原生的 JavaScript 实现了所需的功能。其中，点击缩略图会调用 showFullscreenImage 函数，在全屏模式下显示对应的大图。全屏模式的样式定义在 fullscreen 类中。点击空白处或按下 ESC 键会调用 closeFullscreen 函数退出全屏模式。切换前一张和后一张图片的功能分别通过点击切换按钮和滑动手势实现。所有图片在载入时采用了懒加载模式，使用 data-src 属性存储真实图片的 URL，通过 IntersectionObserver 来观察图片是否进入视窗，并在进入视窗后加载真实图片

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