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

可以使用以下步骤来实现上述功能：

1. 在HTML中，使用一个包含所有缩略图的div，给每个缩略图添加一个点击事件监听器。

<div id="thumbnails">
  <img src="thumbnail1.jpg" onclick="showImage(1)" />
  <img src="thumbnail2.jpg" onclick="showImage(2)" />
  <img src="thumbnail3.jpg" onclick="showImage(3)" />
  <!-- 其他缩略图 -->
</div>

2. 创建一个JavaScript函数showImage(index)，该函数接受一个索引参数，表示要显示的大图的索引。

function showImage(index) {
  // 创建一个全屏的div元素，用于显示大图
  var fullscreenDiv = document.createElement("div");
  fullscreenDiv.id = "fullscreen";
  document.body.appendChild(fullscreenDiv);
  
  // 创建一个img元素，用于显示对应的大图
  var image = document.createElement("img");
  image.src = "image" + index + ".jpg";
  fullscreenDiv.appendChild(image);
  
  // 添加点击空白处或按ESC退出大图模式的事件监听器
  fullscreenDiv.addEventListener("click", hideImage);
  document.addEventListener("keydown", function(event) {
    if (event.keyCode === 27) {
      hideImage();
    }
  });
  
  // 添加切换前一张和后一张的按钮
  var prevButton = document.createElement("button");
  prevButton.innerHTML = "Previous";
  prevButton.addEventListener("click", function() {
    showImage(index - 1);
  });
  fullscreenDiv.appendChild(prevButton);
  
  var nextButton = document.createElement("button");
  nextButton.innerHTML = "Next";
  nextButton.addEventListener("click", function() {
    showImage(index + 1);
  });
  fullscreenDiv.appendChild(nextButton);
}

3. 创建一个JavaScript函数hideImage()，该函数用于隐藏大图并移除全屏的div元素。

function hideImage() {
  var fullscreenDiv = document.getElementById("fullscreen");
  document.body.removeChild(fullscreenDiv);
}

4. 使用CSS样式来实现全屏显示和滑动切换的效果。

#fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fullscreen img {
  max-width: 100%;
  max-height: 100%;
}

#fullscreen button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

#fullscreen button:first-child {
  left: 10px;
}

#fullscreen button:last-child {
  right: 10px;
}

这样，当点击缩略图时，会自动载入对应的大图并在全屏模式下显示。在PC端，可以通过点击切换按钮来切换前一张和后一张大图；在移动端，可以通过滑动切换大图。点击空白处或按ESC键可退出大图模式回到页面