I can’t make the setTimeout work

Asked

Viewed 46 times

-2

In Javascript every time I enter the setTimeout calling the previous function and putting the milliseconds does not work. My goal is to automate the passage of frames, but I want to do with pure JS. Will I have to use the FOR loop?

<html>

        <head>
            <title>Slide</title>

            <style type="text/css">

            body {

                margin: 0px;

            }

            .box-main {

                height: 500px;
                width: 900px;
                border: 5px solid gray;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                overflow: hidden;


            }

            .box-images {

                position: absolute;
                left: 0px;
                height: 500px;
                width: 2700px;
                transition: 1s all linear;

            }

            .box-img1, .box-img2, .box-img3 {

                height: 500px;
                width: 900px;
                float: right;


            }

            .box-pointer {

                height: 500px;
                width: 900px;
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                z-index: 10;

            }

            .box-pointer-int {

                margin-bottom: 20px;

            }

            .pointer1, .pointer2, .pointer3 {

                height: 16px;
                width: 16px;
                border-radius: 8px;
                background-color: gray;
                float: left;
                margin-right: 5px;
                margin-left: 5px;
                opacity: 0.5;

            }

            </style>

        </head>

        <body>

            <div class = "box-main">

                <div class = "box-images">

                    <div class = "box-img1" style = "background-color: red;"></div>
                    <div class = "box-img2" style = "background-color: blue;"></div>
                    <div class = "box-img3" style = "background-color: yellow;"></div>

                </div>

                <div class = "box-pointer">

                    <div class = "box-pointer-int">

                        <div class = "pointer3" onclick = "passar3()"></div>
                        <div class = "pointer2" onclick = "passar2()"></div>
                        <div class = "pointer1" onclick = "passar1()"></div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">

                var intervalo = 3000;

                function passar3() {

                    document.getElementsByClassName("box-images")[0].style.left = "0px";

                }

                function passar2() {

                    document.getElementsByClassName("box-images")[0].style.left = "-900px";

                }

                function passar1() {

                    document.getElementsByClassName("box-images")[0].style.left = "-1800px";

                }

            </script>

        </body>

</html>
javascript

2 answers

1


Using setInterval and Document.addeventlistener with the "Domcontentloaded" parameter, I was able to start it automatically. Now it was necessary to make other changes so that the click worked together with the automatic spin. Problem that the code became quite messy. I added a few comments to make it clearer.

    <head>
        <title>Slide</title>

        <style type="text/css">

        body {

            margin: 0px;

        }

        .box-main {

            height: 500px;
            width: 900px;
            border: 5px solid gray;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;


        }

        .box-images {

            position: absolute;
            left: 0px;
            height: 500px;
            width: 2700px;
            transition: 1s all linear;

        }

        .box-img1, .box-img2, .box-img3 {

            height: 500px;
            width: 900px;
            float: right;


        }

        .box-pointer {

            height: 500px;
            width: 900px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            z-index: 10;

        }

        .box-pointer-int {

            margin-bottom: 20px;

        }

        .pointer1, .pointer2, .pointer3 {

            height: 16px;
            width: 16px;
            border-radius: 8px;
            background-color: gray;
            float: left;
            margin-right: 5px;
            margin-left: 5px;
            opacity: 0.5;

        }

        </style>

    </head>

    <body>

        <div class = "box-main">

            <div class = "box-images">

                <div class = "box-img1" style = "background-color: red;"></div>
                <div class = "box-img2" style = "background-color: blue;"></div>
                <div class = "box-img3" style = "background-color: yellow;"></div>

            </div>

            <div class = "box-pointer">

                <div class = "box-pointer-int">

                    <div class = "pointer3" onclick = "atualiza_img_atual('0')"></div>
                    <div class = "pointer2" onclick = "atualiza_img_atual('1')"></div>
                    <div class = "pointer1" onclick = "atualiza_img_atual('2')"></div>

                </div>

            </div>

        </div>

        <script type="text/javascript">

            var img_atual = 1;
            var intervalo;

            function passar() {
                //calcula a posição inicial da imagem atual
                tamanho = img_atual * (-900);
                //posiciona na imagem atual
                document.getElementsByClassName("box-images")[0].style.left = tamanho + "px";
                //atualiza o numero da imagem atual, se for a última retorna para zero
                if(img_atual == 2) {
                    img_atual = 0;
                } else {
                    img_atual++;    
                }

            }
            //atualiza qual imagem será exibida
            function atualiza_img_atual(img) {
                img_atual = img;
                //interrompe o carrossel
                clearInterval(intervalo);
                //executa uma vez imediatamente
                passar();
                //inicia o carrosel novamente
                intervalo = setInterval(passar, 3000, img_atual); 
            }
            //Inicia o carrossel no load do conteúdo da página
            document.addEventListener("DOMContentLoaded", function(event) {
              intervalo = setInterval(passar, 3000, img_atual);
            });


        </script>

    </body>

  • There was only the question of updating when you are clicked on the balls... but that I know how to do and only added to the script. I want to thank you, but the policy here tells us users not to do it by these means.

0

Just add the setTimeout within its functions, for example:

within its function passar3 you add the setTimeout calling his function passar2, which in turn would also have a setTimeout calling its function passar1, overall your code would look that way:

var intervalo = 3000;

    passar3();

    function passar3() {

        document.getElementsByClassName("box-images")[0].style.left = "0px";

        setTimeout(() => {
            passar2()
        }, intervalo);
    };

    function passar2() {

        document.getElementsByClassName("box-images")[0].style.left = "-900px";

        setTimeout(() => {
            passar1()
        }, intervalo);
    }

    function passar1() {

        document.getElementsByClassName("box-images")[0].style.left = "-1800px";

        setTimeout(() => {
            passar3()
        }, intervalo);

    }

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.