Escribí un guión que cambia la imagen cada 1 segundo.
Pero tengo un problema, el loop no se detiene al pasar el mouse y dejar el mouse sobre child_block.
Es decir, cuando pasa el mouse sobre la imagen, las imágenes deberían dejar de cambiar. Y cuando el mouse se aleja de la imagen, las imágenes deberían cambiar nuevamente.
¿Cómo arreglar este problema?
He marcado áreas problemáticas en el código con comentarios.
let main = document.querySelector('.main_block'); let child_block = document.querySelector('.child_block'); let images = document.createElement('img'); images.className = 'img_s'; child_block.prepend(images); 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; } images.src = colors[count].name; cycle = setTimeout(change, colors[count].interval); count = count + 1; } let cycle = setTimeout(change,1000); main.addEventListener('mouseover', function(e){ // ******** loop stop not working =( ******** let child = e.target.className; if(child == 'child_block'){ clearTimeout(cycle); } }) main.addEventListener('mouseout', function(e){ // ******** loop restart doesn't work either =( ******** 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; } .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>El siguiente comportamiento ocurre porque event.target devuelve el elemento secundario más interno sobre el que se está pasando el mouse/haciendo clic. En su caso, dado que el div principal child_block tiene comparativamente menos espacio que img_s , por lo que incluso cuando pasa el mouse sobre la mayoría de las veces, el objetivo será img_s y no child_block Por lo tanto, debe verificar si img_s o child_block se ha desplazado o no. para que este programa funcione.
let main = document.querySelector('.main_block'); let child_block = document.querySelector('.child_block'); let images = document.createElement('img'); images.className = 'img_s'; child_block.prepend(images); 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; } images.src = colors[count].name; cycle = setTimeout(change, colors[count].interval); count = count + 1; } let cycle = setTimeout(change,1000); main.addEventListener('mouseover', function(e){ // ******** loop stop not working =( ******** let child = e.target.className; if(child == 'child_block' || child == 'img_s'){ clearTimeout(cycle); } }) main.addEventListener('mouseout', function(e){ // ******** loop restart doesn't work either =( ******** let child = e.target.className; if(child == 'child_block' || child == 'img_s'){ 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; } .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>