ExercicioWeb
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 ira receber 0. ou seja , quando a estiver na sexta imagem ela irá retornar para a primeira novamente.