ExercicioWeb

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar

Aqui irei demonstrar um exercicio usando Vetor de Imagens e a propriedade SRC

Faça um script, que possui um vetor de imagens, e toda vez que o usuário clica no botão próximo, uma nova imagem é carregada. Dica: use a propriedade src para modificar o caminho da imagem.


Primeiramente irei criar minha função Proximo()

function proximo(){
			var fotos = ["img/carro1.png","img/carro2.png","img/carro3.png","img/carro4.png","img/carro5.png","img/carro6.png"];
			var img = document.getElementById("imagem");

Dentro desta função criei um vetor de Fotos Recebendo as imagens que estão dentro da mesma pasta do arquivo HTML. e outra variavel IMG recebendo o ID ("imagem) da Div que irei mostrar mas abaixo .


function proximo(){
			var fotos = ["img/carro1.png","img/carro2.png","img/carro3.png","img/carro4.png","img/carro5.png","img/carro6.png"];
			var img = document.getElementById("imagem");
			
			img.setAttribute("src",fotos[c]);
			
			c++;
			
			if(c == 6){
				c = 0;
			}
			
		}

Na terceira linha

 img.setAttribute("src",fotos[c]);

eu estou passando o vetor de Fotos para a propriedade SCR.

Depois criei a variavel C como um contador recebendo ela mesmo + 1 .

Dentro do If fiz a condição de que quando ela for igual á 6 ela irá receber 0. ou seja , quando estiver na sexta imagem ela irá retornar para a primeira novamente.