Не работает остановка/возобновление цикла
Написал скрипт, который меняет картинку каждую 1 сек.
Но у меня проблема, цикл не останавливается при наведении и уходе мыши на child_block.
То есть, при наведении мыши на картинку, картинки должны перестать меняться. А при уходе мыши с картинки, картинки снова должны меняться.
Как пофиксить эту проблему?
Проблемные места кода я пометил комментами.
let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
let xep = document.createElement('img');
xep.className = 'img_s';
child_block.prepend(xep);
const colors = [
{name: 'https://i.ibb.co/JkTVvVP/1.png', interval: 1000},
{name: 'https://i.ibb.co/GPZRcL4/2.jpg', interval: 1000},
{name: 'https://i.ibb.co/9wdcLz8/3.png', interval: 1000},
]
let count =0;
function change(){
if(count === colors.length){
count = 0;
}
xep.src = colors[count].name;
cycle = setTimeout(change, colors[count].interval);
count = count + 1;
}
let cycle = setTimeout(change,1000);
main.addEventListener('mouseover', function(e){ // ******** Остановка цикла не работает =( ********
let child = e.target.className;
if(child == 'child_block'){
clearTimeout(cycle);
}
})
main.addEventListener('mouseout', function(e){ // ********Возобновление цикла не работает =( ********
let child = e.target.className;
if(child == 'child_block'){
cycle = setTimeout(change, 1000);
}
})body{
display:grid;
place-items:center;
user-select:none;
}
.main_block{
display:grid;
place-items:center;
border:1px solid black;
width: 50%;
height:500px;
margin:50px;
place-items:center;
}
.img_s{
width:100%;
height:100%;
border:1px solid black;
z-index:-1;
}
.child_block{
border:1px solid red;
width:50%;
height:80%;
z-index:1;
}<div class = "main_block">
<div class = "child_block">
</div>
</div>