como melhorar meu código para não desaparecer umas das div enquanto clico | Front-end

estava treinando um pouco DOM e fiz esse projeto só de rascunho para treinamento. meu objetivo era que ao click as imagens se alterassem em um circulo sem fim, porem uma das minhas imagens div, some quando todas as imagens sao passadas e so fica uma fazendo essa função. como ajustar ?

codigo js:

const imagensTrocar = document.querySelectorAll("[data-img]")
const imagem = document.querySelectorAll("[data-trocar]")



let cont = 0;
function aoclick(element){
    const mudar = imagensTrocar[cont];

    imagemAtual = element.target
    atualParent = imagemAtual.parentNode
    atualParent.replaceChild(mudar,imagemAtual)
    console.log(atualParent)
    cont++
    if (cont >= imagensTrocar.length){
        cont = 0;
    }
    
}

imagem.forEach((element)=>{
    element.addEventListener("click",aoclick)
})

codigo html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./imagem.css">

</head>
<body>
    <header class="fundo">
        <div>
            <nav class="navegacao">
                <ul class="itensNavegacao">
                    <li><a href="INICIO">HOME</a></li>
                    <li><a href="SOBRE">SOBRE</a></li>
                    <li><a href="MAIS">MAIS</a></li>
                </ul>
            </nav>
        </div>
        <div class="opcoes">
            <main class="menu">
                <div class="imagens">
                    <img data-trocar="imagem" src="./img/03.jpg" alt="">
                    <img data-trocar="imagem" src="./img/04.jpg" alt="">
                </div>
                <div class="imagensTroca">
                    <img data-img="foto" data-trocar="imagem" src="./img/05.jpg">
                    <img data-img="foto" data-trocar="imagem" src="./img/06.jpg" >
                    <img data-img="foto" data-trocar="imagem" src="./img/08.jpg" >
                    <img data-img="foto" data-trocar="imagem" src="./img/09.jpg" >
                </div>
            </main>  
        </div>
        </main>
    </header>
    <script src="./imagem.js"></script>
</body>
</html>

codigo css`

*{margin: auto;}

body{
    background-color: #FAD8D5;
    width:1000px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.navegacao{
    background-color: #6E5F5D;
    width: 700px;
    height: 70px;
    position: relative;
    top: 20px;
    left: 45px;
    box-shadow: 1px 1px 5px #6E5F5D;
     
}
.itensNavegacao {
    display: flex;
    align-items: center;
    padding: 20px;
}



.opcoes{

    
    background-color: #AD9693;
    width: 700px;
    height: 500px;
    box-shadow: 1px 1px 5px #6E5F5D;
    
    
}

.imagens{
    width: 700px;
    height: 500px;
    display: flex;
    flex-direction: column ;
   
   
}
.imagens img{
    width: 200px;
    height: 200px;
    cursor: pointer;
}

.imagensTroca{
    width: 700px;
    height: 500px;
    display: flex;
    flex-direction: column ;
    gap: 40px;
    display: none;

}

.imagensTroca img{
    width: 200px;
    height: 200px;
    cursor: pointer;
   
}

Oii, Aline! Tudo bem?

Parabéns por estar colocando em prática os seus conhecimentos e indo além das aulas!

O problema pode estar no trecho de código em que você substitui a imagem atual pela próxima imagem. Quando há substituição da imagem atual, acaba removendo a imagem original do DOM e adicionando a próxima imagem no lugar. E quando você chega à última imagem e tenta substituí-la pela primeira imagem, a primeira imagem já foi removida do DOM e não está mais disponível.

Aline, como é um projeto externo ao curso, no qual eu não possuo um conhecimento do código em sua totalidade, consigo apenas te sugerir alguma solução a partir das informações que foram fornecidas. Então é importante sempre adaptar o código conforme o seu projeto como um todo.

Dito isso, uma solução seria criar uma cópia da imagem original e adicioná-la novamente ao DOM quando você chegar à última imagem para que sempre tenha todas as imagens disponíveis no DOM.

Veja um exemplo de código baseado no seu evento de clique:

function aoclick(element) {
  const mudar = imagensTrocar[cont];

  imagemAtual = element.target;
  atualParent = imagemAtual.parentNode;
  atualParent.replaceChild(mudar, imagemAtual);
  console.log(atualParent);
  cont++;
  
  if (cont >= imagensTrocar.length) {
    cont = 0;
    const primeiraImagem = imagensTrocar[0].cloneNode(true);
    atualParent.appendChild(primeiraImagem);
  }
}

Fique à vontade para se inspirar no código, fazer adaptações e realizar os testes em seu projeto.

Espero que dê certo! Caso surja dúvida durante o curso, compartilhe no fórum.

Bons estudos.

Mergulhe em programação