Estou fazendo um slider aonde, ao colocar o mouse por cima, eu quero que o interval pare. Essa parte funciona perfeitamente com o clearInterval. Porém, quando o mouse sai, o setInterval não está funcionando. Consigo pegar o evento de saída do mouse perfeitamente (utilizei testes dando um alert quando o mouse saisse, por exemplo), mas o setInterval não funciona. O código é o seguinte:
JS:
function slideImgs(){
var sld = document.querySelector("#slider");
var imgs = document.querySelector("#slider").getElementsByTagName("img");
var i = 0;
var pos = 82.1;
var maxLoop = pos * imgs.length;
var interval = setInterval(function(){
while(pos <= maxLoop){
sld.style.transform = "translateX(-"+pos+"rem)";
pos = pos + 82.1;
if(pos >= maxLoop){
pos = 0;
}
break;
}
},2000);
sld.onmouseover = function(){
clearInterval(interval);
}
sld.onmouseout = function(){
setInterval(interval,2000);
}
}
HTML:
<div id="slides">
<span id="nav1"> < </span>
<span id="nav2"> > </span>
<ul id="slider">
<li><img src="img/img1.jpg" class="slides"/></li>
<li><img src="img/img2.jpg" class="slides"/></li>
<li><img src="img/img3.jpg" class="slides"/></li>
<li><img src="img/img4.jpg" class="slides"/></li>
</ul>
</div>