0

Tenho quatro funções que fazem a mesma coisa, uma troca de imagem no evento click. Minha dúvida é, como faço pro item anterior voltar à imagem que estava antes quando eu clicar no próximo?

    function mudaImagem() {
    var imgA = "https://danielelima.com.br/files/giiiiiii.gif";
    var imgA2 = "https://danielelima.com.br/files/elipse-1.png";
    var img = document.getElementById('imagem01');
    img.src = (img.src == imgA ? imgA2 : imgA);
}

document.getElementById('imagem01').addEventListener('click', mudaImagem, true);


function mudaImagem2() {
    var imgB = "https://danielelima.com.br/files/giiiiiii2.gif";
    var imgB2 = "https://danielelima.com.br/files/elipse-2.png";
    var img = document.getElementById('imagem02');
    img.src = (img.src == imgB2 ? imgB : imgB2);
}

document.getElementById('imagem02').addEventListener('click', mudaImagem2, true);

function mudaImagem3() {
    var imgC = "https://danielelima.com.br/files/giiiiiii3.gif";
    var imgC2 = "https://danielelima.com.br/files/elipse-3.png";
    var img = document.getElementById('imagem03');
    img.src = (img.src == imgC2 ? imgC : imgC2);
}

document.getElementById('imagem03').addEventListener('click', mudaImagem3, true);

function mudaImagem4() {
    var imgD = "https://danielelima.com.br/files/giiiiiii4.gif";
    var imgD2 = "https://danielelima.com.br/files/elipse-4.png";
    var img = document.getElementById('imagem04');
    img.src = (img.src == imgD2 ? imgD : imgD2);
}

document.getElementById('imagem04').addEventListener('click', mudaImagem4, true);

Meu html

    <ul class="nav nav-tabs justify-content-center" role="tablist">
        <li class="nav-item">
            <a href="#um" class="nav-link active" data-toggle="tab">
                <img id="imagem01" class="img-fluid" src="https://danielelima.com.br/files/elipse-1.png" width="104px" alt="01" title="01">
            </a>
        </li>

        <li class="nav-item">
            <a href="#dois" class="nav-link" data-toggle="tab">
                <img id="imagem02" class="img-fluid mobile" src="https://danielelima.com.br/files/giiiiiii2.gif" alt="02" width="104px" title="02">
            </a>
        </li>
        <li class="nav-item">
            <a href="#tres" class="nav-link" data-toggle="tab">
                <img id="imagem03" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii3.gif" alt="03" width="104px">
            </a>
        </li>
        <li class="nav-item">
            <a href="#quatro" class="nav-link" data-toggle="tab">
                <img id="imagem04" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii4.gif" alt="04" width="104px">
            </a>
        </li>
    </ul>

2 Respostas 2

2

Sugestão de organização do código baseado no que foi enviado. Dessa maneira se torna bem mais fácil de tu alterar a imagem que está selecionada e seu código fica mais coeso.

let imagens = [
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii.gif",
        imgSecundaria: "https://danielelima.com.br/files/giiiiiii.gif",
        element: 'imagem01'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii2.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-2.png",
        element: 'imagem02'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii3.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-3.png",
        element: 'imagem04'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii4.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-4.png",
        element: 'imagem04'
    },
];

imagens.forEach(() => {
    escutaClick()
});

function escutaClick(){
    // faça aqui o escutador
}

// indica quando será a primeira imagem
let numeroAtual = 0;

function mudaImagem(numeroAtual){
    // faça aqui a alteração na imagem
}
3
  • muito obrigado amigo! Mais como ainda estou aprendendo fiquei com as seguintes dúvidas, como ficaria essa função escutaClick e a mudaImagem, fiz algumas tentativas aqui mais não funcionou!
    – WPfan
    Commented 7/10/2020 às 21:13
  • 2
    Sem a parte do HMTL fica difícil pra eu implementar um código pra você. Mas, basicamente, tu tem que fazer um foreach para adicionar o addEventListener. Na função de mudar imagem, tu precisa trocar o numero que está ativo e percorrer o array para saber qual elemento exibir. Dessa maneira fica bem mais fácil de adicionar novas imagens, por exemplo, sem repetir tanto código. Commented 7/10/2020 às 21:21
  • 1
    Vou colocar meu html no código para você ver como está!
    – WPfan
    Commented 7/10/2020 às 21:25
1

Sempre opto por não publicar código então coloquei apenas uma etapa, não tenho certeza se era assim o resultado

 <ul class="nav nav-tabs justify-content-center" role="tablist">
        <li class="nav-item">
            <a href="#um" class="nav-link active imagens" data-toggle="tab">
                <img id="imagem" class="img-fluid" src="https://danielelima.com.br/files/elipse-1.png" width="104px" alt="01" title="01">
            </a>
        </li>
        <button onclick="voltar()">Voltar</button>
        <button onclick="avancar()">Avançar</button>
    </ul>

Array com a lista de todas as imagens

let imagens = [
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii.gif",
        imgSecundaria: "https://danielelima.com.br/files/giiiiiii.gif",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii2.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-2.png",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii3.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-3.png",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii4.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-4.png",
    },
];

funções para alterar a imagem

let numeroAtual = 0;

function voltar(){
    if(numeroAtual < 0){
        numeroAtual = 0;
    } else {
        numeroAtual--
    }
    mudaImagem();
}

function avancar(){
    if(numeroAtual === imagens.length - 1){
        numeroAtual = 0;
    } else {
        numeroAtual++
    }
    mudaImagem();
}

function mudaImagem(){
    let imagemTag = document.getElementById('imagem');
    imagemTag.setAttribute('src', imagens[numeroAtual].imgPrincipal)
}
1
  • Ei @Felipemeida eu entendi sua lógica e realmente ficou bem mais coeso o código, portanto não vai haver um botão de avançar e voltar, o evento tem que ocorrer nas próprias imagens, entendendo: teremos imagem 1, 2, 3 e 4, quando eu clicar na imagem 2 ele muda para uma outra imagem, se eu clicar na imagem 3 a imagem 2 deverá voltará ao normal para a imagem que estava antes. Então essa funcionalidade deve funcionar em todos os demais, pois a pretensão com isso é INDICAR QUAL MENU ESTÁ SELECIONADO.
    – WPfan
    Commented 15/10/2020 às 17:23

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 .