Forward and backward slide Javascript

Asked

Viewed 1,447 times

1

I have a photo slider on my page, with buttons to go back and forth. I can’t get these buttons to work. At first I imagined that the logic to advance would be the same used for the slide to advance automatically, however, 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 into the window.onload of the index page.

javascript html css

2 answers

1

The error of the 'undeclared' function may be in the fact that you use window.onload = function() { ... }.

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

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

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

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

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

0

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

http://jsfiddle.net/8j362k7d/1/

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

For example:

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

As can be seen here: http://jsfiddle.net/8j362k7d/2/ ....

Browser other questions tagged javascript html css

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