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
0
