Dears,
I have written some codes to make the pictures keep changing from time to time. I also want to have a fade in effect each of the picture. The program is running as said. However, somehow in its first loop, the browser always can't render the pictures smoothly, and it comes to smooth start in its second loop. Below is my code, could you tell me why and how to correct it. Thanks.
<!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>