Botão próximo e anterior com jQuery ou JavaScript Puro

2 de janeiro de 2018 5 respostas Resolvido

Renato122 2 de janeiro de 2018

Olá a todos, eu gostaria de saber se alguém pode me ajudar a criar uma maneira de ao clicar no Botão “Próxima Foto” ou “Foto Anterior” ele vá percorrendo as as imagens que estão dentro da DIV…A Estrutura HTML que eu tenho é assim

<div class="fotos">
<div class="imagemSimples"><img class="big_image" src="imagem1.png" /></div>
<div class="imagemSimples"><img class="big_image" src="imagem2.png" /></div>
<div class="imagemSimples"><img class="big_image" src="imagem3.png" /></div>
<div class="imagemSimples"><img class="big_image" src="imagem4.png" /></div>
</div>

Para fazer os botões, eu preciso de uma Função que saiba qual imagem etá sendo exibida, ai usando clicar em Próxima, ele vá para a da frente, se eu clicar Anterior, ele volte uma…

Caso eu esteja na ultima imagem e apertar Próxima novamente, ele vá até a primeira…

Eu não como fazer isso nem qual funções jQuery utilizar, alguém pode me ajudar com um exemplo? Eu fico muito grato…

5 Respostas

elvex 2 de jan. de 2018 1 like

Já considerou utilizar algum plugin pronto do jQuery? Existem vários. O slick é um bem famoso: https://plugins.jquery.com/slick/

Francisco_Chaves 2 de jan. de 2018 1 like

Olá amigo, veja se este exemplo te ajuda

<body>

<div>
<img id="imagem">
</div>
<button id="anterior">anterior</button>
&nbsp;
<button id="proximo">proximo</button>

<script>
//Capturar os elementos pelo id
var anterior = document.getElementById("anterior");
var proximo = document.getElementById("proximo");
var imagem = document.getElementById("imagem");
var qtdImagem = new Number(4);

var cont = 0 ;

imagem.src ="./imagens/imagem"+cont+".png";

anterior.onclick = function () {
    if(cont > 0){
        imagem.src = "";
        cont--;
        imagem.src = "./imagens/imagem"+cont+".png";
    }
};

proximo.onclick = function () {
    if( cont < (qtdImagem - 1)  ){
        imagem.src ="";
        cont++;
        imagem.src = "./imagens/imagem"+cont+".png";
    }
};

</script>

</body>

Renato122 3 de jan. de 2018

Na verdade, eu não sou muito bom programando em JQuery, quando se fala de Plugin, eu já fico perdido porque não sei adapta-lo a minhas funções que já estão prontas, mas valeu a ajuda!!

Renato122 3 de jan. de 2018

Eu gostei muito do seu exemplo, bem, simples e preciso, eu vou estudar ele para tentar adaptar a minha função que já está pronta…Valeu mesmo, qualquer coisa eu volto aqui para falar se deu certo e Marcado como resposta que resolveu o meu problema!

Muito obrigado!!!

Solucao aceita

Renato122 3 de jan. de 2018

Consegui fazer Francisco_Chaves elvex, muito simples, eu fiz o uso donext() e prev() do jQuery e usei…ficou muito mais simples porque eu ja tinha função de selecionar imagem feita…

Obrigado aos dois pelas dicas

Criado 2 de janeiro de 2018

Ultima resposta 3 de jan. de 2018

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados