Подскажите, пожалуйста, как сделать чтобы обработчики события мыши onmouseenter
и onmouseleave
срабатывали постоянно?
Есть слайдер, при наведении на него мыши он останавливается на той картинке, которая была при наведении, когда мышь убирают слайдер продолжает работать. Проблема, что он срабатывает 1 раз и потом начинается ерунда.
var slides = document.querySelectorAll('.slides .li_slide ');
var currentSlide = 0;
var slideInterval = setInterval(NextSlide, 2000);
var playing = true;
function PauseSlide() {
playing = false;
clearInterval(slideInterval);
}
function WorkSlide() {
playing = true;
slideInterval = 0;
setInterval(NextSlide, 2000);
}
function Click() {}
function OnMouse() {
if (playing == true) {
playing = false;
PauseSlide();
}
var cart0 = document.getElementById("cart0");
cart0.style.display = "block";
var cart1 = document.getElementById("cart1");
cart1.style.display = "block";
var cart2 = document.getElementById("cart2");
cart2.style.display = "block";
}
function LeaveMouse() {
if (playing == false) {
playing = true;
WorkSlide();
}
var cart0 = document.getElementById("cart0");
cart0.style.display = "none";
var cart1 = document.getElementById("cart1");
cart1.style.display = "none";
var cart2 = document.getElementById("cart2");
cart2.style.display = "none";
}
function NextSlide() {
slides[currentSlide].className = 'li_slide';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'li_slide showing';
}
<div class="wrapper">
<ul class="slides">
<li class="li_slide showing" onclick="Click()" onmouseenter="OnMouse()" onmouseleave="LeaveMouse()">
<div class="cartain" id="cart0">
<h1 class="name_forest">Forest</h1>
<button>More</button>
</div>
</li>
<li class="li_slide" onclick="Click()" onmouseenter="OnMouse()" onmouseleave="LeaveMouse()">
<div class="cartain" id="cart1">
<h1 class="name_sea">Sea</h1>
<button>More</button>
</div>
</li>
<li class="li_slide" onclick="Click()" onmouseenter="OnMouse()" onmouseleave="LeaveMouse()">
<div class="cartain" id="cart2">
<h1 class="name_desert">Desert</h1>
<button>More</button>
</div>
</li>
</ul>
</div>