将鼠标悬停在上方时清除间隔不起作用

Question

我遵循我得到的所有答案，它与其他人的工作方式完全相同。不知道我做错了什么。我只是想让幻灯片在悬停在div 上时停止。我什至将光标：指针放入div，但似乎这无济于事。

var myVar = window.setInterval(yanslider, 7000);
  
  function yanslider(){
    $('.slider-inner > div:first')
      .fadeOut(1000)
      .removeClass('active')
      .next()
      .fadeIn(1000)
      .addClass('active')
      .end()
      .appendTo('.slider-inner');
  }
  $( ".slider-inner" ).hover(function() {
      // onmouseover
      window.clearInterval(myVar);
      // onmouseout
      yanslider();
  });

.slider-inner{
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	border:#666 solid 1px;
}
.slider-inner > div{
	display:none;
	width:200px;
	height:200px;
}
.slider-inner .active{
	display:inline-block;
	cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-inner">
          <div id="item" class="active"><p>#1</p></div>
          <div id="item" ><p>#2</p></div>
          <div id="item" ><p>#3</p></div>
        </div>

Answer 1

一种方法是使用超时，而不是间隔。

• yanslider可以创建执行操作的超时，并以递归方式调用自身以创建逻辑循环
• 在页面加载时，调用 yanslider() 以启动循环
• 将鼠标悬停在滑块上时，取消超时
• 将鼠标悬停在滑块外时，再次调用该函数，以便逻辑循环恢复

var sliderTimeout;
function yanslider () {
  //start a timeout for seven seconds later
  sliderTimeout = setTimeout(function(){
    $('.slider-inner > div:first')
        .fadeOut(1000)
        .removeClass('active')
        .next()
        .fadeIn(1000)
        .addClass('active')
        .end()
        .appendTo('.slider-inner');
        
        yanslider(); // recursive loop
  }, 2000);
}
$( ".slider-inner" ).hover(
  function () { // onmouseover
    clearInterval( sliderTimeout ); // terminate the timeout
  },
  function () { // onmouseout
    yanslider(); // start the loop again
  }
);
yanslider(); // start the loop on page load

.slider-inner{
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	border:#666 solid 1px;
}
.slider-inner > div{
	display:none;
	width:200px;
	height:200px;
}
.slider-inner .active{
	display:inline-block;
	cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-inner">
          <div id="item" class="active"><p>#1</p></div>
          <div id="item" ><p>#2</p></div>
          <div id="item" ><p>#3</p></div>
        </div>