JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg1">gnu</div>
<div id="bg2">gnou</div>
<div id="bg3">gni</div>
<div id="bg4">gna</div>
<div id="bg5">gno</div>

JavaScript

function diapo(){
    var bg1 = document.getElementById("bg1");
    var bg2 = document.getElementById("bg2");
    var bg3 = document.getElementById("bg3");
    var bg4 = document.getElementById("bg4");
    var bg5 = document.getElementById("bg5");
    
    console.log(bg1);
    console.log(bg1.style.display);
    console.log(document.getElementById("bg1").style.display);

    if(bg1.style.display !== "none"){
        bg1.style.display = "none";
        bg2.style.display = "block";
        console.log('image1');
    }else if(bg2.style.display !== "none"){
        bg2.style.display = "none";
        bg3.style.display = "block";
        console.log('image2');
    }else if(bg3.style.display !== "none"){
        bg3.style.display = "none";
        bg4.style.display = "block";
        console.log('image3');
    }else if(bg4.style.display !== "none"){
        bg4.style.display = "none";
        bg5.style.display = "block";
        console.log('image4');
    }else if(bg5.style.display !== "none"){
        bg5.style.display = "none";
        bg1.style.display = "block";
        console.log('image5');
    }else{
        console.log('NE MARCHE PAS');
    }
}
window.onLoad = setInterval(diapo, 2000);