Есть следующая картина.
<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 но как нужно не пойму.
Спасибо за любой пинок.
