Смена картинками при наведении.
 

Помогите кто чем может.
Задача такая.
На сервере есть картинки 5 шт
Нужно сделать что бы при наведении на него каждые 5 сек сменялся src на новое фото. А при выходе из фокуса возвращал 1 фотку.
За ранее всем благодарен!

) ленивый народ пошел...

<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>

Нет, без пробелов, а то такие допущения могут привести и к ошибкам.

Огромное спасибо