1

Подскажите, пожалуйста, как сделать чтобы обработчики события мыши 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>

1 ответ 1

0

Найдите десять отличий :).

var slides = document.querySelectorAll('.slides .li_slide ');
var currentSlide = 0;
var slideInterval = setInterval(NextSlide, 2000);

function PauseSlide() {
  if (slideInterval) { 
    clearInterval(slideInterval);
    slideInterval = null;
  }
}

function WorkSlide() {
  if (!slideInterval)
    slideInterval = setInterval(NextSlide, 2000);
}

function Click() {}

function OnMouse() {
    PauseSlide();
}

function LeaveMouse() {
    WorkSlide();
}

function NextSlide() {
  slides[currentSlide].className = 'li_slide';
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].className = 'li_slide showing';
}
.li_slide{
  display:none;
}
.showing {
  display:block;
}
<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>

1
  • Спасибо большое! Работает!) Т.е. моя ошибка состояла в том, что я очищала slideInterval не в той функции и можно было и без переменной playing обойтись. Спасибо!
    – Polly
    10 июн 2018 в 6:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.