如何在悬停时一张一张地显示img列表

Question

每当我将鼠标悬停在主图像上时，我希望其他图像开始连续显示，就像当我们将鼠标悬停在拇指上时播放短视频时 YouTube 上的视频一样，但我想显示这些其他拇指图像一个视频。

<div class="card-image" id="thumb_image">
  <a href="watch.php?v=158">
    <img id="mainthumb" src="uploads/videos/thumbnails/158-5bba245c7fee8.jpg" class="responsive-img ">
    <img id="hovervid" src="uploads/videos/thumbnails/158-5bba245c7fee8.jpg">
    <img id="hovervid" src="uploads/videos/thumbnails/158-5bba245c9c372.jpg">
    <img id="hovervid" src="uploads/videos/thumbnails/158-5bba245cbf323.jpg">
    <div id="duration">
      <span class="white-text">00:04</span>
    </div>
</div>

Answer 1

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

const cycleRate = 0.5 // 500ms
let processId = null

const handleStart = e => {
  const carousel = document.querySelector('.carousel')
  const img = carousel.querySelector('img')
  const defaultImage = e.target.getAttribute('src')
  const images = JSON.parse(e.target.dataset.hoverImages)
  let currentId = parseInt(e.target.dataset.hoverId, 10)
  images.unshift(defaultImage) // Add target src to front
  carousel.classList.toggle('carousel-hidden', false)
  carousel.style.left = e.clientX + 'px'
  carousel.style.top = e.clientY + 'px'
  img.setAttribute('src', images[currentId])
  currentId = (currentId + 1) % images.length
  processId = setInterval(() => {
    img.setAttribute('src', images[currentId])
    currentId = (currentId + 1) % images.length
    // Save the current image id
    e.target.dataset.hoverId = currentId
  }, Math.max(cycleRate * 1000, 1))
}

const handleEnd = e => {
  const carousel = document.querySelector('.carousel')
  carousel.classList.toggle('carousel-hidden', true)
  clearInterval(processId)
  processId = null
}

const responsiveImages = document.querySelectorAll('.responsive-img')
Array.from(responsiveImages).forEach(responsiveImage => {
  responsiveImage.addEventListener('mouseover', handleStart)
  responsiveImage.addEventListener('mouseout', handleEnd)
})

.carousel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: white;
  border: thin solid grey;
  padding: 4px;
}

.carousel-hidden {
  display: none;
}

<div class="card-image" id="thumb_image">
  <a href="watch.php?v=158">
    <img id="mainthumb" src="https://via.placeholder.com/160.png/09f/fff?text=Main"
      class="responsive-img"
      data-hover-images='[
        "https://via.placeholder.com/160.png/f90/fff?text=Alt+1",
        "https://via.placeholder.com/160.png/ff0/000?text=Alt+2",
        "https://via.placeholder.com/160.png/0f9/000?text=Alt+3"
      ]'
      data-hover-id="0">
    <div id="duration">
      <span class="white-text">00:04</span>
    </div>
  </a>
</div>

<div class="carousel carousel-hidden"><img /></div>

Answer 2

这可以完全使用 CSS 来完成。通过结合 :hover 状态和关键帧动画，您可以简单地将图像移动一定百分比。通过为要移动的图像数量设置一个变量，您可以自动计算此数学计算。

我使用您的代码作为基本示例创建了一个 codepen。 https://codepen.io/epogeedesign/pen/gOPKGKo?editors=1100

<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>