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>