任意のコンテンツ（今回は3つのdiv）をjsのsetIntervalで無限に表示非表示を切り替えるサンプル

＞css
.roop { position:absolute; width: 100%;}
#div1{ z-index: 1;}
#div2{ z-index: 2;}
#div3{ z-index: 3;}
.fade {
　opacity: 0;
　transition: opacity 3s;
}
.show {
　opacity: 1;
}

＞html
<div id="div1" class="roop fade show">いち</div>
<div id="div2" class="roop fade">に</div>
<div id="div3" class="roop fade">さん</div>

＞js
//1～3までの変数をそれぞれ定義
const el1 = document.getElementById('div1');
const el2 = document.getElementById('div2');
const el3 = document.getElementById('div3');
function showElement() {　//「showElement」という関数を作成
　if(el1.classList.contains('show')){　//「el1（div1）」に「show」があった場合の処理
　　el1.classList.remove('show');
　　el2.classList.add('show');
　　el3.classList.remove('show');
　}else if(el2.classList.contains('show')){　//以降「el2（div2）」「el3（div3）」も同様に設定
　　el1.classList.remove('show');
　　el2.classList.remove('show');
　　el3.classList.add('show');
　}else if(el3.classList.contains('show')){
　　el1.classList.add('show');
　　el2.classList.remove('show');
　　el3.classList.remove('show');
　}
}
setInterval(function(){
　showElement();
}, 3000);　//3秒毎に「showElement」を繰り返し実行

const els = [　//roop対象のidを手動で指定・取得し、配列「els」に格納
　document.getElementById('div1'),
　document.getElementById('div2'),
　document.getElementById('div3'),
];
let current = 0;　//「current」の初期値を設定
const toggle = () => {　//以下2行の内容を「toggle」という関数に格納
　els.forEach((el, idx) => el.classList.toggle('show', idx === current));　//「els」の要素（el）に対してidxがcurrentと等しい場合に「show」を追加し、等しくない場合には「show」を削除するトグル（切り替え）
　current = (current + 1) % els.length;　//実行されるたび「current」に「els」の総数　÷　current+1を代入（変数更新）
　console.log(current);　//コンソールに出力（1→2→0）
};
setInterval(toggle, 3000);　//3秒毎に「toggle」を繰り返し実行