Question

我遵循我为clearinterval获得的所有答案，这与其他人的工作原理完全一样。不知道我做错了什么。我只希望幻灯片在将鼠标悬停到div时停止播放。我什至在div中放了一个cursor：指针，但似乎无济于事。

property

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;
}

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>

悬停时，clearinterval不起作用

1 个答案: