4

Gostaria de clicar em uma imagem e exibir outra no lugar, depois clicar de novo e exibir mais uma e assim por diante ate voltar pra imagem original.

Consigo exibir apenas uma imagem. Comecei a estudar javascript faz pouco e não sobre o que procurar para resolver isso.

function trocar(i) {    
    if (i == 1) {
        document.getElementById("agni").src="img/gods-skin/agni-swagni.jpg"
    } 

<img id="agni" onclick="trocar(1)" alt="hindu" class="img-gods expand" src="img/gods/agni.jpg">

Agradeço se alguém puder ajudar

1
  • Vc tem que criar alguma coisa de onde as imagens são puxadas, por exemplo, uma array.
    – Sam
    Commented 31/12/2017 às 5:45

2 Respostas 2

0

Crie um contador, incremente acada click para ter uma referencia, adicione o caminho das img que desejar em um Array.

cada indice ira corresponder a uma img ex:

 indice 0 = img/gods/agni.jpg
 indice 1 = img/gods/agni2.jpg

Agora é so atualizar a imagem ex:

 document.getElementById("agni").src=array[indice];

Segue o código em funcionamaneto.

HTML:

<img id="agni" onclick="trocar()" alt="hindu" class="img-gods expand" src="img/gods/agni.jpg">

JS:

var currentImgIndex=1;
var ImgSrcArray = [ //caminho das suas imgs aqui
'img/gods/agni.jpg',
'img/gods/agni2.jpg',
'img/gods/agni3.jpg',
'img/gods/agni4.jpg'
];

function trocar(){

  if(currentImgIndex == ImgSrcArray.length) //reseta quando o contatador for igual ao tamanho da array e volta a 1° img
  {
    currentImgIndex=0;
  }
  document.getElementById("agni").src=ImgSrcArray[currentImgIndex]; //altera a img do elemento "agni" de acordo com o indice
    currentImgIndex++; // incrementa a nossa referencia

}
1
  • Muito obrigado, era isso que eu queria fazer.
    – Inokk
    Commented 31/12/2017 às 15:21
0

Solução criando um array com as imagens que você deseja alternar:

Lembre-se que o último item da array não pode ter vírgula no final (veja a seta mostrando).

var imagens = [
   "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg",
   "https://upload.wikimedia.org/wikipedia/commons/e/e0/JPEG_example_JPG_RIP_050.jpg",
   "https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg" // ← não tem vírgula
];

function trocar(){
   var img = document.getElementById("agni");
   var img_src = img.src;
   var img_idx = imagens.indexOf(img_src);
   img.src = imagens[ img_idx == imagens.length-1 ? 0 : img_idx+1 ];
}
<img width="300" id="agni" onclick="trocar()" alt="hindu" class="img-gods expand" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

1
  • Quando coloco o caminho das minhas imagens, com o click, ele passa para a próxima imagem e fica nela, não continua o array. Com as tuas imagens funciona de boas.
    – Inokk
    Commented 31/12/2017 às 15:19

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 .