鼠标悬停时，clearinterval不起作用

Question

I follow all the answers I got for the clearinterval, it exactly the same as how others working one. Not sure what I did wrong. I just want the slide to stop when to hover over to the div. I even put a cursor: pointer into the div, but seem like this doesn't help.

 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

One approach to this is to use a timeout, rather than an interval.

• yanslider can create a timeout that performs the action, and recursively calls itself to create a logical loop
• on page load, call yanslider() to start the loop
• When you hover over the slider, cancel the timeout
• When you hover out the slider, call the function again so that the logical loop resumes

 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>