实现单张图片悬停切换为4-5张图片的交互效果

基于你提供的基础代码，要实现鼠标悬停在图片区域时自动切换展示4-5张图片的效果，下面提供两种可行方案：

方案一：纯CSS动画实现（无需JS，适合固定轮播逻辑） #

HTML结构 #

把所有需要轮播的图片放在同一个容器内，第一张设为默认显示：

<div class="tc-container">
  <img src="1.jpg" alt="图1" class="slide-img active" />
  <img src="2.jpg" alt="图2" class="slide-img" />
  <img src="3.jpg" alt="图3" class="slide-img" />
  <img src="4.jpg" alt="图4" class="slide-img" />
  <img src="5.jpg" alt="图5" class="slide-img" />
</div>

CSS代码 #

通过动画延迟控制图片依次切换，鼠标离开时回到默认图：

.tc-container {
  width: 700px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* 默认显示第一张图 */
.slide-img.active {
  opacity: 1;
}

/* 悬停时触发轮播动画 */
.tc-container:hover .slide-img {
  animation: slideCycle 16s infinite;
}

/* 给每张图设置不同延迟，实现依次切换 */
.tc-container:hover .slide-img:nth-child(1) { animation-delay: 0s; }
.tc-container:hover .slide-img:nth-child(2) { animation-delay: 3s; }
.tc-container:hover .slide-img:nth-child(3) { animation-delay: 6s; }
.tc-container:hover .slide-img:nth-child(4) { animation-delay: 9s; }
.tc-container:hover .slide-img:nth-child(5) { animation-delay: 12s; }

/* 动画关键帧：控制显示/隐藏的过渡和停留 */
@keyframes slideCycle {
  0% { opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* 鼠标离开时停止动画，回到默认图 */
.tc-container:not(:hover) .slide-img {
  animation: none;
}
.tc-container:not(:hover) .slide-img.active {
  opacity: 1;
}

特点：不用写JS代码，实现简单；缺点是轮播节奏固定，无法做复杂交互。

方案二：JavaScript控制（灵活度高，支持自定义逻辑） #

HTML结构 #

和方案一一致：

<div class="tc-container">
  <img src="1.jpg" alt="图1" class="slide-img active" />
  <img src="2.jpg" alt="图2" class="slide-img" />
  <img src="3.jpg" alt="图3" class="slide-img" />
  <img src="4.jpg" alt="图4" class="slide-img" />
  <img src="5.jpg" alt="图5" class="slide-img" />
</div>

CSS代码 #

简化样式，只保留基础布局和过渡效果：

.tc-container {
  width: 700px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.slide-img.active {
  opacity: 1;
}

JavaScript代码 #

通过事件监听控制轮播的启动和停止，自定义切换间隔：

const container = document.querySelector('.tc-container');
const slides = container.querySelectorAll('.slide-img');
let currentIndex = 0;
let slideInterval;

// 切换到下一张图的逻辑
function nextSlide() {
  slides[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % slides.length;
  slides[currentIndex].classList.add('active');
}

// 鼠标悬停时启动轮播（每隔3秒切换一次，可自行修改时长）
container.addEventListener('mouseenter', () => {
  slideInterval = setInterval(nextSlide, 3000);
});

// 鼠标离开时停止轮播，回到第一张图
container.addEventListener('mouseleave', () => {
  clearInterval(slideInterval);
  slides.forEach(slide => slide.classList.remove('active'));
  currentIndex = 0;
  slides[currentIndex].classList.add('active');
});

特点：可以自由调整轮播间隔，还能扩展点击切换、暂停等功能，适合需要复杂交互的场景。

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