时间戳

首页 > 解决方案 > 如何在 JavaScript 中停止鼠标悬停间隔？

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>

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

标签： javascripthtml

解决方案

我在这里看到的一个问题是<img>标签在标签下方script。当您尝试附加addEventListenerat 时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，而在第二个脚本中不是

推荐阅读