我有一个已经创建的轮播插件,我需要一种方法来使其运行将图像移到侧面并引入下一个图像的功能。我使用导航箭头进行此操作,但我想实现一种方法来单独执行此操作。
Google充斥着每个人的轮播库,因此我无法找到有关此信息的信息。
基本上,我只需要以下内容:
window.setTimeout(() => {
// do something
}, 1000);
但是它需要反复运行,除非触发了特定事件。我的第一个想法是while
循环,但这将是灾难性的。
我没有什么可显示的,但是目前,这是代码:
let mouseIsOver = false;
inner.addEventListener('mouseenter', () => {
mouseIsOver = true;
console.log(mouseIsOver);
});
inner.addEventListener('mouseleave', () => {
mouseIsOver = false;
console.log(mouseIsOver);
});
您可以使用setInterval方法,该方法重复调用一个函数。然后打电话clearInterval
停止它。
let inner = document.getElementById('inner');
let pages = ['mediumspringgreen', 'coral', 'cyan', 'moccasin'];
let mouseIsOver = false;
let interval = start();
let i = 0;
function start() {
return setInterval(() => inner.style.background = pages[i++ % 4], 3000);
}
inner.addEventListener('mouseenter', () => {
mouseIsOver = true;
clearInterval(interval);
console.log('pause');
});
inner.addEventListener('mouseleave', () => {
mouseIsOver = false;
console.log('continue');
interval = start();
});
#inner { width: 100px; height: 100px; background: cyan }
.as-console-wrapper { max-height: 1.5em !important; }
<div id=inner></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句