clearinterval не работает при наведении курсора - PullRequest
Новая
       15

clearinterval не работает при наведении курсора

0 голосов
/ 14 июня 2019

Я слежу за всеми ответами, которые я получил для clearinterval, это точно так же, как другие работают один.Не уверен, что я сделал не так.Я просто хочу, чтобы слайд прекратился, когда зависнуть в 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>

1 Ответ

0 голосов
/ 14 июня 2019

Одним из подходов к этому является использование тайм-аута, а не интервала.

  • 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>
...