Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como mediar dois eventos contrários com serInteval

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Arrays, Loop e Estilos e atividade Replicando a validação e o cálculo do IMC para todos os pacientes

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Eu preparei um html com 3 imagens de mesmo tamanho dentro de uma div e com o css, coloquei as 3 na mesma posição, uma sobre a outra. Coloquei uma classe com os nomes b1, b2, b3 para cada imagem como está abaixo

 <div class="slide">
    <img src="Imagens/Paris-Senna.png" alt="paris" class="b1">
    <img src="Imagens/Notre-Dame.png" alt="notre dame"  class="b2">
    <img src="Imagens/lUVRE.png" alt="louvre"  class="b3">

No CSS eu pus display:none em todas as imagens e gostaria de faze-las aparecer e sumir usando setInterval no javascript. Fiz mais duas classe no CSS com o nome de mostra e esconde

.mostra{
       display:block;
    }
    .esconde{
       display:none;
    }

Para poder manipulá-las no java script. No javascript, criei uma variavel n com o valor 0. selecionei todas as imagens com o query.SelectorAll pus em uma variável imagem e parti para função Eu começo fazendo a imagem[0] aparecer e logo depois fiz uma outra function com serInterval para fazer com que ela desaparecesse em 3seg. depois disso eu somo +1 ao n e digo que quando o n for mairo do que 2 ele volte a ser zero. 

 <script>
        var n = 0
        var imagem = document.querySelectorAll("img")
       function troca(){


            imagem[n].classList.add("mostra");
            setInterval(function(){
                imagem[n].classList.remove("mostra");       
            },3000)


              console.log(n)
              n++
              if(n>2){n=0}

       }
    </script>

Só que não funciona. Alguém poderia mostrar qual é a forma correta de se escrever o código, para que as imagens fiquem aparecendo e desaparecendo em looping. Desde já muito Obrigado pela atenção

4 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Valmyr tudo bem?

O código funcionando como pediu ficaria assim, dá uma olhada:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Como mediar dois eventos contrários com setInteval </title>
    <style>
        .mostra {
            display: inline;
        }

        .esconde {
            display: none;
        }
    </style>
</head>

<body>
    <div class="slide">
        <img src="Imagens/Paris-Senna.png" alt="paris" class="b1 esconde">
        <img src="Imagens/Notre-Dame.png" alt="notre dame" class="b2 esconde">
        <img src="Imagens/lUVRE.png" alt="louvre" class="b3 esconde">
    </div>
    <script>
        var n = 0
        var imagem = document.querySelectorAll("img")
        troca();
        function troca() {


            setInterval(function () {
                if (n == 0) {

                    nmenos1 = 2;

                } else {

                    nmenos1 = n - 1;

                }
                imagem[nmenos1].classList.add("esconde");
                imagem[nmenos1].classList.remove("mostra");
                imagem[n].classList.add("mostra");
                imagem[n].classList.remove("esconde");
                console.log(n);
                n++;

                if (n > 2) {
                    n = 0;
                }

            }, 3000)




        }
    </script>
</body>

</html>

Espero ter ajudado!!!

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

André muito obrigado. Não tem noção o quanto me ajudou. Eu ainda não entendi completamente o código e a diferença que faz funcionar. Não vou perguntar antes de tentar queimar os nerônios, e entender por mim mesmo e por isso também não vou dar a questão como respondida. Vou tentar decifrar o enigma, e se sucumbir, e somente se.... vou pedir ajuda de novo. As vezes o tico e o teco não querem trabalhar. Não sabe como já briguei com essa questão por horas. Por isso muito obrigado por me emprestar a sua luz.

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Entendi. Perfeito. Eu preciso de um varável que limpe e outra que mostre. Sensacional. Muito Obrigado. Só mais uma pergunta. É assim que se faz um slideshow normalmente? Digo só a lógica de programação. Ou usualmente se constroi diferente, com outro método? Poroutro princípio?

Desde já Muito Obrigado

solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Dinada! Existem diversos jeitos de fazer um slideshow automático. Esse é que fizemos é o mais simples.

O pessoal usa bastante o Carousel do Bootstrap 4 https://getbootstrap.com/docs/4.0/components/carousel/