Queridos,
He escrito algunos códigos para que las imágenes cambien de vez en cuando. También quiero tener un efecto de desvanecimiento en cada una de las imágenes. El programa se está ejecutando como se dijo. Sin embargo, de alguna manera en su primer ciclo, el navegador no siempre puede representar las imágenes sin problemas, y comienza sin problemas en su segundo ciclo. A continuación se muestra mi código, ¿podría decirme por qué y cómo corregirlo? Gracias.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Change Pictures</title> <style> body { height:100vh; } #picture { background-repeat: no-repeat; background-position: center; background-size: 400px 400px; width:80%; margin:auto; height: 80%; opacity: 0; } #picture.fadein { opacity: 1; transition: opacity 2s linear; } </style> </head> <body> <div id="picture"></div> <script> setInterval(changepcs,3000); var opacity = 0; var arrindex = 0; var arr1 = ["p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg"]; function changepcs() { if(arrindex == arr1.length){arrindex = 0}; let abc = document.getElementById("picture"); let address = arr1[arrindex]; abc.style.backgroundImage = `url(${address})`; abc.classList.remove("fadein"); opacity = Number(window.getComputedStyle(abc).getPropertyValue("opacity")); abc.classList.add("fadein"); arrindex++; } </script> </body> </html>