停止使用 setInterval 自动播放的 javascript 幻灯片 - Siema

Question

我正在使用 siema 幻灯片，因为它看起来非常漂亮而且轻巧。

我希望幻灯片在用户将鼠标悬停在上方时播放，并在他们离开时停止。

根据指南文档，我已经使用 setInterval() 播放位，但我无法让幻灯片停止。我正试图终止间隔，但这似乎不起作用。

这是我的完整代码

const mySiema = new Siema({
  duration: 250,
  loop: true, // note: this just gets the slideshow to return to the beginning
});

const container = document.querySelector('.siema');

var timer, intervalInSec = 1000;

container.addEventListener('mouseenter', () => setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', clearInterval(timer));

和heres a codepen用于摆弄。

Answer 1

您需要为 setInterval() 方法的输出分配定时器。

It (setInterval) returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()

您还需要在鼠标离开事件上调用匿名函数才能正确调用 clearInterval()。例如：

container.addEventListener('mouseenter', () => timer = setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', () => clearInterval(timer));

停止使用 setInterval 自动播放的 javascript 幻灯片 - Siema

Stop javascript slideshow which is autoplaying using setInterval - Siema

javascript

slideshow

setinterval

siema