Forward and rewind JavaScript slide

Question

Forward and rewind JavaScript slide

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a photo slider on my page, with buttons to go back and forward. I can not make these buttons work. First I figured that the logic to move forward would be the same one used for the slide to advance automatically, but I could not. I get the error that the function is not set, even if it is!

The html:

<div class="row">
<div class="eight columns">
    <img src="img/seta2.png" class="slide-seta" onclick="voltaSlide();">
    <img src="img/seta1.png" class="slide-seta" onclick="avancaSlide();">
</div>
</div>

The slide function:

window.onload = function(){

    function avancarImagem(){

        var imagem = imagens[proximaImagem];//armazena a proxima imagem na fila em uma variável
        imagem.style.zIndex = zIndexAtual++;//aumenta o índice do z-index e atribui à próxima imagem da fila
        imagem.style.marginLeft = "0%";//reseta a margem da imagem, fazendo ela entrar na tela

        proximaImagem++;//ajusta o índice que aponta a próxima imagem

        //caso o índice tenha alcançado o fim da fila, resetá-lo
        if(proximaImagem >= imagens.length){
            proximaImagem = 0;
        }

        //aqui está o truque para fazer com que as imagens que já passaram voltem para fora da área visível
        //o tempo de intervalo está aqui para que isso ocorra depois que a imagem ficou atrás da nova imagem da fila
        setTimeout(resetarImagens,200);
    }

    function resetarImagens(){
       var imagemVisivel = proximaImagem -1;

        //se o índice alcançou o início da fila, voltar para o final
        if(imagemVisivel < 0){
            //o menos 1 está aqui pois o parâmetro length retorna o total de itens no array (no caso, 3)
            //precisamos da posição do último item do array (sempre é length-1)
            imagemVisivel = imagens.length - 1;
        }

        //retorna todas as imagens à sua posição original, menos a imagem visível
        for(var i = 0; i < imagens.length; i++){
            if(i != imagemVisivel){
                imagens[i].style.marginLeft = "100%";
            }
        }
    }

var intervalo = setInterval(avancarImagem,4000);

And the function to move forward by clicking the arrow:

function avancaSlide(){
    var img = imagens[proximaImagem];
    img.style.zIndex = zIndexAtual++;
    img.style.marginLeft = "0%";
    proximaImagem++;//ajusta o índice que aponta a próxima imagem

    //caso o índice tenha alcançado o fim da fila, resetá-lo
    if(proximaImagem >= imagens.length){
        proximaImagem = 0;
    }
}

Both are being loaded in the window.onload of the index page.

javascript html css

asked by anonymous 02.05.2015 / 22:21

2 answers

How to put UOL videos in JWplayer [closed] Error in Unity5: 'Player' AnimationEvent 'RestartLevel' has no receiver! Are you missing a component? "

score 1 · Answer 1

The error of the function appears 'not declared' can be in the fact that you use window.onload = function() { ... } .

The suggestion I can give you is to remove all functions ( function avancarImagem() , function resetarImagens() , etc) from within window.onload = function() { ... } . That is, completely remove the 'window.onload'.

You can leave all this functions in a file funcoes.js, and call this file normally in the <head> of the page):

<script src="js/funcoes.js"></script>

As for the setInterval function, you can declare it at the bottom of the page, before closing <body> .

    (... ↑ Conteúdo do site ↑ ...)
    <script> var intervalo = setInterval(avancarImagem,4000); </script>
</body>

score 0 · Answer 2

It is not good practice to mix the layers in this way. I created a script, feel free to use it !!!! ....

link

If you want to put some animation, you can use css:

For example:

*[this='slider'] *[this='container'] * {
    transition: all 0.5s;
}

As can be seen here: link ....