HTML - Como dar trancision a una foto

 
Vista:
sin imagen de perfil
Val: 6
Ha aumentado su posición en 28 puestos en HTML (en relación al último mes)
Gráfica de HTML

Como dar trancision a una foto

Publicado por Roberto (3 intervenciones) el 29/03/2021 19:36:29
Trate de hacer una página donde las fotos cambien cada cierto intervalo, lo logré pero las fotos cambian de manera muy brusca como puedo darle una trancision para cada vez que cambie la nueva foto no aparezca de repente, aquí debajo les dejo el codigo:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/estilos.css">
	<title>Cambia foto</title>
</head>
 
<body>
	<h1>Cambiador de fotos</h1>
	<img src="imagenes/1.jpg" height="300px" id="fotoCambia" class="fotoCambia"/>
 
	<script>
		(function(){
	let contador = 0;
	let imagen = document.getElementById("fotoCambia");
	let cambia = function(){
		if(contador == 2){
			document.getElementById("fotoCambia").src="imagenes/2.jpg";
 
		} else if(contador == 4){
		document.getElementById("fotoCambia").src="imagenes/3.jpg";
 
		} else if(contador == 6){
		document.getElementById("fotoCambia").src="imagenes/4.jpg";
		contador= 0;
		} else if(contador == 0){
			document.getElementById("fotoCambia").src="imagenes/1.jpg";
		}
 
		contador++;
	}
 
 
 
	setInterval(cambia, 1000);
 
 
}())
	</script>
</body>
 
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder