1

Tenho um slider de fotos em minha página, com botões para retroceder e avançar. Não consigo fazer esses botões funcionarem. Primeiramente imaginei que a lógica para avançar seria a mesma usada para o slide avançar automaticamente, porém, não consegui. Recebo o erro de que a função não está definida, mesmo que esteja !

O 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>

A função de slide:

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);

E a função para avançar ao clicar na seta:

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;
    }
}

Ambos estão sendo carregados no window.onload da página index.

2 Respostas 2

1

O erro de a função aparecer 'não declarada' pode estar no fato de você usar window.onload = function() { ... }.

A sugestão que posso dar é que você remova todas as funções (function avancarImagem(), function resetarImagens(), etc) de dentro do window.onload = function() { ... }. Isso é, remova completamente o 'window.onload'.

Você pode deixar todas essa funções em um arquivo funcoes.js, e chamar esse arquivo normalmente no <head> da página):

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

E quanto à função de setInterval, você pode declará-la no fim da página, antes de fechar o <body>.

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

Não é uma boa pratica misturar as camadas desta forma. Criei um script, sinta-se a vontade para usa-la!!!!....

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

Caso queira colocar algum tipo de animação, você pode usar o css:

Por exemplo:

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

Como pode ser visto aqui: http://jsfiddle.net/8j362k7d/2/ ....

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 .