轮播 onmouseover 和 onmouseout 不起作用

Question

我正在练习Javascript。我做了一个图像轮播。我的旋转木马幻灯片工作正常。对于运行我使用的幻灯片 setinterval。当用户将鼠标悬停在图像上时，我想停止幻灯片，当它悬停时，幻灯片将从暂停的地方开始。为此，我使用了 clearinterval。当我 onmouseover 然后 onmouseout 我的旋转木马表现得很奇怪。看来我的逻辑不成立。我不知道该怎么做。

const images = document.getElementById('imgs')
const allImages = document.querySelectorAll('#imgs img')
let index = 0;
function run() {
 
  index++;
  if (index > allImages.length - 1) {
    index = 0
  }

  imgs.style.transform = `translateX(${-index * 500}px)`
}

setInterval(run, 2000);

images.onmouseover = () => {
  console.log('In');
  clearInterval(run) + 1
}
images.onmouseout = () => {
  console.log('Out');
  setInterval(run, 2000);
}

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.carousel {
  overflow: hidden;
  width: 500px;
  height: 500px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}

.image-container {
  display: flex;
 transition: transform 300ms linear;
 transform: translateX(0);
}

img {
  width:500px;
  height: 500px;
  object-fit: cover;
}

 <div class="carousel">
    <div class="image-container" id="imgs" >
      <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
      <img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
    </div>
  </div>

Answer 1

你输入的时间间隔有误。为了能够清除onmouseover事件中的interval，需要将其赋值给一个变量

var x = setInterval(run, 2000);

然后将变量传递给 clearInterval 方法。

clearInterval(x)

然后onmouseout你再次设置间隔

x = setInterval(run, 2000);

最终代码如下所示：

var x = setInterval(run, 2000);

images.onmouseover = () => {
  console.log('In');
  clearInterval(x) + 1
}
images.onmouseout = () => {
  console.log('Out');
  x = setInterval(run, 2000);
}

轮播 onmouseover 和 onmouseout 不起作用

Carousel onmouseover and onmouseout does not work

html

javascript

css

dom-events