3

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>

1 Resposta 1

3

A chamada setInterval(interval,2000) não vai fazer nada. O interval é um "identervalID" mas o setInterval espera uma callback como parâmetro.

https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

Dê um nome para a sua callback:

//pense num nome melhor que esse :)
function mexerNasCoisas(){
    while(pos <= maxLoop){
        sld.style.transform = "translateX(-"+pos+"rem)";
        pos = pos + 82.1;

        if(pos >= maxLoop){
            pos = 0;
        }

        break;
    }

}


var interval = setInterval(mexerNasCoisas,2000);

sld.onmouseover = function(){
    clearInterval(interval);
}

sld.onmouseout = function(){
    interval = setInterval(mexerNasCoisas,2000);
}

Uma outra possibilidade é simplesmente deixar o interval rodando o tempo todo, sem dar clearInterval. Você pode desabilitar o interval setando uma flag.

var isActive = true;

var interval = setInterval(function(){
    if(!isActive){ return; }

    while(pos <= maxLoop){
        sld.style.transform = "translateX(-"+pos+"rem)";
        pos = pos + 82.1;

        if(pos >= maxLoop){
            pos = 0;
        }

        break;
    }

},2000);

sld.onmouseover = function(){
    isActive = false;
}

sld.onmouseout = function(){
    isActive = true;
}
1
  • Resposta completa e objetiva. Obrigado ! Commented 27/02/2016 às 23:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .