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

Programação
,
#1

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…

#2

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

1 curtida
#3

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>
1 curtida
#4

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

#5

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

#6

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