Javascript 如何在悬停状态下逐个显示img列表

我想当我在主图像上悬停时，其他图像开始一个接一个地连续显示，就像在YouTube上的视频一样，当我们悬停在thumb上时，会播放一段短视频，但我想显示这些其他thumb图像，而不是视频

00:04

您可以通过使用mouseover和mouseout事件以及一些数据属性来实现这一点

const循环率=0.5//500ms
设processId=null
常数handleStart=e=>{
const carousel=document.querySelector（“.carousel”）
常量img=carousel.querySelector（'img'）
const defaultImage=e.target.getAttribute（'src'）
const images=JSON.parse（e.target.dataset.hoverImages）
让currentId=parseInt（e.target.dataset.hoverId，10）
images.unshift（defaultImage）//将目标src添加到前端
carousel.classList.toggle（'carousel-hidden'，false）
carousel.style.left=e.clientX+'px'
carousel.style.top=e.clientY+'px'
setAttribute（'src'，images[currentId]）
currentId=（currentId+1）%images.length
processId=setInterval（（）=>{
setAttribute（'src'，images[currentId]）
currentId=（currentId+1）%images.length
//保存当前图像id
e、 target.dataset.hoverId=currentId
}，数学最大值（循环率*1000，1））
}
常数handleEnd=e=>{
const carousel=document.querySelector（“.carousel”）
carousel.classList.toggle（'carousel-hidden'，true）
clearInterval（进程ID）
processId=null
}
const responsiveImages=document.queryselectoral（'.responsiveimg'））
Array.from（responsiveImages）.forEach（responsiveImage=>{
responsiveImage.addEventListener（'mouseover'，handleStart）
responsiveImage.addEventListener（'mouseout'，handleEnd）
})

.carousel{
位置：绝对位置；
排名：0；
左：0；
z指数：100；
背景：白色；
边框：薄实灰色；
填充：4px；
}
.旋转木马隐藏{
显示：无；
}

---

这可以完全使用CSS来完成。通过组合：悬停状态和关键帧动画，可以简单地将图像移动一定百分比。通过设置要移动多少图像的变量，可以自动计算此数学

我已经创建了一个代码笔，使用您的代码作为基本示例。

00:04
：根{
--图像计数：4；
}
.卡片图像{
位置：相对位置；
宽度：300px；
溢出：隐藏；
背景：#dedede；
}
.卡片图像：之前{
内容：''；
垫面：56.25%；
显示：块；
}
.卡片图像a{
位置：绝对位置；
字号：0；
排名：0；
左：0；
宽度：100%；
空白：nowrap；
}
.卡图像a img{
显示：内联块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.卡图像a：悬停{
动画：悬停画廊2步（var（--图像计数））无限2；
}
.卡图像#持续时间{
位置：绝对位置；
底部：15px；
右：15px；
颜色：白色；
文本阴影：1px 1px 5px黑色；
z指数：1；
字体大小：16px；
}
@关键帧悬停库{
0% {
转化：translateX（0%）；
}
100% {
转换：translateX（计算值（var（--图像计数）*-100%）；
}
}

您的JavaScript在哪里？你基本上想要一个自动播放图像的旋转木马？我没有js，我不知道如何创建这个功能，欢迎你。如果你愿意，请投票回答！

<div class="card-image" id="thumb_image">
  <a href="watch.php?v=158">
    <img id="mainthumb" src="https://picsum.photos/320/180?random=1" class="responsive-img ">
    <img id="hovervid" src="https://picsum.photos/320/180?random=2">
    <img id="hovervid" src="https://picsum.photos/320/180?random=3">
    <img id="hovervid" src="https://picsum.photos/320/180?random=4">
    </a>
    <div id="duration">
        <span class="white-text">00:04</span>
    </div>
</div>

:root {
  --image-count: 4;
}
.card-image {
  position: relative;
  width: 300px;
  overflow: hidden;
  background: #dedede;
}
.card-image:before {
  content: '';
  padding-top: 56.25%;
  display: block;
}
.card-image a {
  position: absolute;
  font-size: 0;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
}
.card-image a img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-image a:hover {
  animation: hover-gallery 2s steps(var(--image-count)) infinite 2s;
}
.card-image #duration {
  position: absolute;
  bottom: 15px;
  right: 15px;
  color: white;
  text-shadow: 1px 1px 5px black;
  z-index: 1;
  font-size: 16px;
}
@keyframes hover-gallery {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(var(--image-count) * -100%));
  }
}
 </style>