) ленивый народ пошел...
<style>
.hoverable {
width: 4em
}
</style>
<img class="hoverable" src="one.jpg" data-fotos="one.jpg, two.jpg, three.jpg, four.jpg, five,jpg">
<script>
document.querySelectorAll('.hoverable').forEach(img => {
let fotos = img.dataset.fotos.split(", ")
let current = 0
let interval
img.addEventListener('mouseenter', function() {
console.log('hi')
interval = setInterval(function() {
current++
if (current >= fotos.length) {
current = 0
}
img.src = fotos[current]
}, 1000)
})
img.addEventListener('mouseleave', function() {
img.src = fotos[0]
clearInterval(interval)
})
})
</script>
