如何为CSS实现的自动轮播图添加点击单图放大查看功能

完全可以仅通过HTML+CSS实现点击图片放大全屏查看的效果，无需引入JavaScript，我已经帮你修正了原CSS里多余的闭合括号问题，修改后的完整代码如下：

修改后的CSS代码 #

.slideshow {
  height: 350px;
  margin: 0 auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  display: flex;
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.move {
  height: 100%;
  transform: translate3d(0, 0, 0);
  display: flex;
  animation: moveSlideshow 50s linear infinite;
}

.move > a img {
  height: 150px;
  width: auto;
  cursor: pointer;
  margin: 0 10px;
}

.slideshow:hover .move {
  animation-play-state: paused;
}

@keyframes moveSlideshow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 以下是图片放大模态框样式 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal:target {
  display: flex;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
}

修改后的HTML代码 #

<div class="slideshow">
  <div class="move">
    <a href="#img1"><img src="https://t4.ftcdn.net/jpg/00/53/45/31/360_F_53453175_hVgYVz0WmvOXPd9CNzaUcwcibiGao3CL.jpg " alt="" /></a>
    <a href="#img2"><img src="https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg " alt="" /></a>
    <a href="#img3"><img src="https://area515.org/wiki/images/a/a9/Example.jpg" alt="" /></a>
    <a href="#img4"><img src="https://static.wikia.nocookie.net/true_reverend_insanity/images/7/70/Example.png/revision/latest?cb=20200328112134 " alt="" /></a>
    <a href="#img5"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg " alt="" /></a>

    <div class="move">
      <a href="#img1"><img src="https://t4.ftcdn.net/jpg/00/53/45/31/360_F_53453175_hVgYVz0WmvOXPd9CNzaUcwcibiGao3CL.jpg " alt="" /></a>
      <a href="#img2"><img src="https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg " alt="" /></a>
      <a href="#img3"><img src="https://area515.org/wiki/images/a/a9/Example.jpg" alt="" /></a>
      <a href="#img4"><img src="https://static.wikia.nocookie.net/true_reverend_insanity/images/7/70/Example.png/revision/latest?cb=20200328112134 " alt="" /></a>
      <a href="#img5"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg " alt="" /></a>
    </div>
  </div>
</div>

<!-- 以下是每个图片对应的全屏模态框 -->
<div id="img1" class="modal">
  <a href="#" class="close-btn">&times;</a>
  <img src="https://t4.ftcdn.net/jpg/00/53/45/31/360_F_53453175_hVgYVz0WmvOXPd9CNzaUcwcibiGao3CL.jpg" alt="">
</div>
<div id="img2" class="modal">
  <a href="#" class="close-btn">&times;</a>
  <img src="https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg" alt="">
</div>
<div id="img3" class="modal">
  <a href="#" class="close-btn">&times;</a>
  <img src="https://area515.org/wiki/images/a/a9/Example.jpg" alt="">
</div>
<div id="img4" class="modal">
  <a href="#" class="close-btn">&times;</a>
  <img src="https://static.wikia.nocookie.net/true_reverend_insanity/images/7/70/Example.png/revision/latest?cb=20200328112134" alt="">
</div>
<div id="img5" class="modal">
  <a href="#" class="close-btn">&times;</a>
  <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
</div>

功能说明 #

• 所有交互纯靠HTML锚点和CSS的:target伪类实现，没有任何JS代码，兼容性覆盖绝大多数主流浏览器
• 点击轮播区域的任意图片就会弹出对应图片的全屏查看层，背景会变成半透黑色，图片居中自适应屏幕大小
• 点击右上角的关闭按钮，或者点击半透黑色的背景区域，即可关闭放大层回到原页面，原轮播的自动滚动、悬停暂停功能完全不受影响

内容的提问来源于stack exchange，提问作者Lykus