setInterval при вводе мыши и очистить интервал при отпускании мыши - PullRequest
Новая
       122

setInterval при вводе мыши и очистить интервал при отпускании мыши

0 голосов
/ 17 февраля 2020

Я использую setInterval для создания самостоятельного слайд-шоу, которое запускается при помощи мыши, используя этот учебник: https://www.amideveloper.com/how-to-start-slideshow-on-hover-image-in-jquery/

Это работает нормально, но я бы хотел, чтобы слайд-шоу было остановлено при отпускании мыши используя clearInterval.

Я не знаю, что я делаю неправильно, мой интервал не очищается и слайд-шоу не останавливается ...

вот мой код:

JQUERY

$(".fadeInOut > div:gt(0)").hide();

function change_div() {

  $(".fadeInOut > div:first").fadeOut(0).next().fadeIn(0).end().appendTo(".fadeInOut");

}

$(".fadeInOut").mouseenter(function(){

    myVar = setInterval(change_div, 600);
  change_div();

});

$(".fadeInOut").mouseleave(function(){

  clearInterval(myVar);

});

HTML 

<div class="fadeInOut">
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></div>
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></div>
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></div>
</div>

CSS

.fadeInOut > div {
    position: absolute;
}

вот ссылка на jsfidlle:

https://jsfiddle.net/0ysg3r67/

любая помощь будет оценена

1 Ответ

2 голосов
/ 17 февраля 2020 
var myVar;

$(".fadeInOut").mouseenter(function(){
  clearInterval(myVar);
  myVar = setInterval(change_div, 600);
  change_div();
});

Что-то с вашими слайд-переходами приводит к повторному запуску мышиного центра, создавая несколько интервалов. Чтобы защититься от этого, попытайтесь очистить интервал перед созданием нового.

В качестве альтернативы, вместо перемещения по слайдам, вы можете просто пометить тот, который видим, и использовать его, чтобы знать, какой слайд должен будет показано дальше. Похоже, это решает проблему с Firefox, вызывающим мышиный центр снова и снова. 

var myVar;
var $slides = $('.fadeInOut > div');

$(".fadeInOut > div:not(.current)").hide();

function change_div() {
	var $current = $slides.filter('.current');
  var $next = ($current.next().length ? $current.next() : $slides.first());
  
  $current.fadeOut(0).removeClass('current');
  $next.addClass('current').fadeIn(0);
}

$(".fadeInOut").mouseenter(function(){
	console.log('start');

	myVar = setInterval(change_div, 600);
  change_div();

});

$(".fadeInOut").mouseleave(function(){
  console.log('stop');
  clearInterval(myVar);

});
.fadeInOut > div {
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fadeInOut">
	<div class="current"><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></div>
	<div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></div>
	<div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></div>
</div>
...