Skip to content

一个滚动公告组件,如何在鼠标滑入时停止播放,在鼠标离开时继续等待滑入时的剩余等待时间后播放?

Posted on:2022年10月12日 at 09:36

轮播图的定时滚动,一般是使用 setInterval 实现。

可以监听轮播图的 mouseovermouseout 事件,如果 mouseover 被触发,就清除定时轮播,并记录下一次轮播的剩余等待时间xs,如果 mouseout 被触发,就在 xs 的时间后立即进行切换,并且开启定时轮播。

当然其中的细节还比较多,比如 mouseover 的过程中手动切换了轮播图该怎么处理等等。

原文转自:https://fe.ecool.fun/topic/d281c552-c5d1-4d42-b2fa-0e0774884bbf