Блог

Главная - Вопросы по программированию - Карусель onmouseover и onmouseout не работает

Карусель onmouseover и onmouseout не работает

#javascript #html #css #dom-events

#javascript #HTML #css #dom-события

Вопрос:

Я практикуюсь в Javascript. Я создал карусель изображений. Мой слайд карусели работает нормально. Для запуска слайда я использовал setinterval . Когда пользователь наведет курсор на изображение, я хочу остановить слайд, и когда он будет наведен, слайд начнется там, где он остановится. Для этого я использовал clearinterval . Когда я onmouseover тогда onmouseout , моя карусель ведет себя странно. Похоже, моя логика не работает. Я не знаю, как это сделать.

 const images = document.getElementById('imgs')
const allImages = document.querySelectorAll('#imgs img')
let index = 0;
function run() {
 
  index  ;
  if (index > allImages.length - 1) {
    index = 0
  }

  imgs.style.transform = `translateX(${-index * 500}px)`
}

setInterval(run, 2000);

images.onmouseover = () => {
  console.log('In');
  clearInterval(run)   1
}
images.onmouseout = () => {
  console.log('Out');
  setInterval(run, 2000);
}  
 *{
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.carousel {
  overflow: hidden;
  width: 500px;
  height: 500px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}

.image-container {
  display: flex;
 transition: transform 300ms linear;
 transform: translateX(0);
}

img {
  width:500px;
  height: 500px;
  object-fit: cover;
}  
  <div class="carousel">
    <div class="image-container" id="imgs" >
      <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60" alt="">
      <img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60" alt="">
      <img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60" alt="">
      <img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60" alt="">
    </div>
  </div>

Ответ №1:

Вы допустили ошибку с интервалом. Чтобы иметь возможность очистить интервал в событии onmouseover, вам необходимо присвоить его переменной

 var x = setInterval(run, 2000);

затем вы передаете переменную в метод clearInterval.

 clearInterval(x)

затем onmouseout вы снова устанавливаете интервал

 x = setInterval(run, 2000);

Окончательный код будет выглядеть следующим образом:

 var x = setInterval(run, 2000);

images.onmouseover = () => {
  console.log('In');
  clearInterval(x)   1
}
images.onmouseout = () => {
  console.log('Out');
  x = setInterval(run, 2000);
}

Комментарии:

1. Большое спасибо @Nikko. Как я уже упоминал, я начинающий уровень :). У меня к вам пара вопросов: 1. why you assign to variable? 2. why in clearinterval you added 1 , 3. since x = setInterval(run, 2000); then why not just put x in onmouseout

2. Добро пожаловать, @krisna. Чтобы ответить на ваш вопрос. 1. Вам нужно присвоить его переменной, потому что вы будете использовать его позже для clearInterval. 2. На самом деле, вы не указали » 1″, я просто скопировал его из вашего кода. 3. Это потому, что clearInterval очищает таймер, поэтому вам нужно установить его снова.