前端：纯css实现图片轮播（自动+手动）

要使用纯CSS实现图片轮播（自动和手动），可以使用animation和transition属性来实现自动轮播，并使用:hover伪类来实现手动轮播。以下是一个简单的例子：

HTML:

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <button class="carousel-control-prev">Previous</button>
  <button class="carousel-control-next">Next</button>
</div>

CSS:

.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
 
.carousel-inner {
  width: 300%;
  animation: slide 9s infinite;
}
 
.carousel-inner .carousel-item {
  width: 100%;
  float: left;
  display: none;
}
 
.carousel-inner .carousel-item.active {
  display: block;
}
 
.carousel-control-prev:hover ~ .carousel-inner {
  animation-play-state: paused;
}
 
.carousel-control-prev:hover ~ .carousel-inner,
.carousel-control-next:hover ~ .carousel-inner {
  animation: none;
}
 
.carousel-control-prev:hover ~ .carousel-inner .carousel-item:target,
.carousel-control-next:hover ~ .carousel-inner .carousel-item:target ~ .carousel-item {
  display: block;
}
 
.carousel-control-prev:hover ~ .carousel-inner .carousel-item:target:nth-last-child(2),
.carousel-control-next:hover ~ .carousel-inner .carousel-item:target:nth-last-child(2) ~ .carousel-item {
  display: block;
}
 
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

在这个例子中，.carousel-inner 使用 animation 属性创建自动轮播效果。当鼠标悬停在左/右控制按钮上时，使用 :hover 伪类选择器暂停动画 (animation-play-state: paused)，然后通过计算 :target 伪类选择器和相邻兄弟元素的 display 属性来实现手动轮播。

注意：这个例子假设每个轮播项都占据了整个视图的宽度。如果你有不同的布局，你可能需要调整CSS代码。