无限图像在屏幕上循环

Question

对于javascript和nextjs，我仍然很新鲜，而且我正在努力创建一个连续的图像循环，这个循环可以在屏幕上显示(仅用于移动的平板电脑)。**如果您访问wevise.org并查看移动大小，您将看到我试图重新创建的内容。以下是html代码

export default function Home() {
  return (
    <div>

      <div className='flex justify-center mt-7 text-xl'>
        <p>Trusted talent from top companies</p>
      </div> 

      <div className='lg:ml-[14rem] lg:mr-[14rem]'>
        <Image src={img} alt='img' className='flex justify-center w-[100%] h-[6.5rem]' />
      </div>

     </div>
  )
}

我从这里要去哪里？

谢谢你的帮助。

Answer 1

您可以查看您共享的站点代码，以了解它是如何工作的。我在那个站点上看到了一些关于html/css的注释：

它们使用类似于下面一个的dom结构，这意味着所有的图像都有absolute位置，并且基本上是位于另一个之上的。

<div class="absolute">
  <img class="absolute opacity-0">
  <img class="absolute opacity-0">
  <img class="absolute opacity-1">
</div>

另外，您可能会注意到，大多数图像都有opacity: 0 (这使得它们不可见)，但是应该可见的图像具有opacity: 1；

因此，为了重复这个功能，我认为您需要编写一个javascript代码，将先前显示的图像的不透明度更改为0，并将队列中下一个图像的不透明度设置为1。

若要定期运行具有延迟的代码，请查看setTimeout或setInterval功能。要找到所有可以使用document.querySelectorAll的图像

还有一件事，要使它只在手机上可见，您需要使用media query CSS功能，例如，他们这样使用它：

@media (min-width: 768px)
.md\:hidden {
    display: none;
}

这意味着，只有当屏幕大小小于768时，才使用768类显示元素。