javascript - 如何在JavaScript中停止鼠标悬停的间隔？

<script>
  var pics = [
  "image/city (1).jpg",
    "image/city (2).jpg",
    "image/city (3).jpg",
    "image/city (4).jpg",
    "image/city (5).jpg",
    "image/city (6).jpg",
    "image/city (7).jpg",
    "image/city (8).jpg",
    "image/beach.jpg",
    "image/beach2.jpg"
  ];

  var inval;
  var photo;

  function carousel() {
    photo = document.getElementById('carousel-pics');
    var i = -1;
    inval = setInterval(function() {
        i++;
        if (i >= pics.length) {
          i = 0;
        }
        photo.src = pics[i];
       }, 1000);
      }

      function removeInterval() {
        clearInterval(inval);
     }

  document.getElementById('carousel-pics').addEventListener("mouseover", removeInterval);
</script>

<div class="polaroid" id="carousel-div" style="width:1000px; height:600px;">
  <img id="carousel-pics" src="image/city (1).jpg" alt="athens" style="width:1000px; height:600px;">

</div>

上面的代码是一些照片的幻灯片放映。当我将鼠标悬停在照片上时，我想停止幻灯片放映。但这行不通。如果我添加了一个按钮来停止幻灯片放映，它会起作用，但是当我使用鼠标悬停事件时，它将无法起作用。

最佳答案

我在这里看到的一个问题是<img>标签在script标签下面。当您尝试在addEventListener处附加document.getElementById('carousel-pics')时，它将不起作用，因为此时document.getElementById('carousel-pics')为空。尝试将script保留在html下面。

<script>
	let ele1 = document.getElementById("test")
	console.log('[1]' , ele1)
</script>

<div id="test"></div>

<script>
	let ele2 = document.getElementById("test")
	console.log('[2]' , ele2)
</script>

上面是相同的代码表示。您可以在第一个脚本中看到元素是null，而在第二个脚本中不是

关于javascript - 如何在JavaScript中停止鼠标悬停的间隔？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60760375/