Javascript-форум - Проблема с наведением

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проблема с наведением (https://javascript.ru/forum/misc/78739-problema-s-navedeniem.html)

Проблема с наведением

Есть следующая картина.

<div class="kartinka">
<img src="1.jpg" data-foto="1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg">
</div>
<script>
  document.querySelectorAll('.kartinka img').forEach(img => {
    let foto = img.dataset.foto.split(", ")
    let current = 0
    let interval
    img.addEventListener('mouseenter', function() {
      console.log('hi')
      interval = setInterval(function() {
        current++
        if (current >= foto.length) {
          current = 0
        }
        img.src = foto[current]
      }, 1000)
    })
    img.addEventListener('mouseleave', function() {
      img.src = foto[0]
      clearInterval(interval)
    })
  })
</script>

А вот как сделать что бы он при наведении на div менял картинки не знаю. Пробовал $('.kartinka').on('mouseleave', function() { но когда этих элементов много то меняет на всех картинках.
понимаю что скорее всего беру не так querySelectorAll но как нужно не пойму.
Спасибо за любой пинок.

А с чего такая уверенность, что картинки без заторинки будут грузиться через 1 сек да еще с интервалом?

Ну как бы работают. смена в 1сек вполне если картинки не hd

Цитата:

Сообщение от ArtemovK

5,jpg

Цитата:

Сообщение от ArtemovK

fotos

исправьте

Поправил спасибо. Но это я тут опечатался в коде все хорошо

ArtemovK,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .kartinka img{
        width: 100px;
        height: 100px;
        margin-top: 25px;
    }
   div.kartinka{
      width: 150px;
      height: 150px;
      background-color: #F0E68C;
      text-align: center;
   }

  </style>
</head>

<body>
<div class="kartinka">
<img src="http://f.artek-ekb.ru/source/1/phXRDS4G3Y9-7p3KD1L5cS19nPF9LDk3.png" data-foto="http://f.artek-ekb.ru/source/1/phXRDS4G3Y9-7p3KD1L5cS19nPF9LDk3.png, https://photoshop-kopona.com/uploads/posts/2018-09/1536740086_02.jpg, https://img2.freepng.ru/20190610/kisspng-red-number-numerical-digit-color-portable-network-5cfe262e223146.4851514915601597901401.jpg">
</div>
<div class="kartinka">
<img src="http://f.artek-ekb.ru/source/1/phXRDS4G3Y9-7p3KD1L5cS19nPF9LDk3.png" data-foto="http://f.artek-ekb.ru/source/1/phXRDS4G3Y9-7p3KD1L5cS19nPF9LDk3.png, https://photoshop-kopona.com/uploads/posts/2018-09/1536740086_02.jpg, https://img2.freepng.ru/20190610/kisspng-red-number-numerical-digit-color-portable-network-5cfe262e223146.4851514915601597901401.jpg">
</div>
<script>
  document.querySelectorAll('.kartinka').forEach(div => {
    const img = div.querySelector('img');
    let fotos = img.dataset.foto.split(", ")
    let current = 0;
    let interval;
    div.addEventListener('mouseenter', function() {
      clearInterval(interval)
      interval = setInterval(function() {
        current = ++current % fotos.length;
        img.src = fotos[current]
      }, 1000)
    })
    div.addEventListener('mouseleave', function() {
      clearInterval(interval);
      current = 0;
      img.src = fotos[current]
    })
  })
</script>

</body>
</html>

Цитата:

Сообщение от ArtemovK

Ну как бы работают

Как бы не считается, если таким образом, то сначала предварительная загрузка, а затем слайды, либо ждем загрузку, а затем показ очередной.