JSFiddle - React, Tailwind, and code Playground

HTML

<div id="service01" class="container">
  サービス1
</div>

<div id="service02" class="container">
  サービス2
</div>

JavaScript

$('#service02, #service03, #service04').hide();

//
var services = ['#service01','#service02','#service03','#service04'];
var nowProcess = 0;

//
var fadeProcess = function(){
	//
  var fadeOutTgt = nowProcess;
  if(++nowProcess == services.length)nowProcess = 0;
  var fadeInTgt = nowProcess;
	//
  setTimeout(function(){
  		//
      $(services[fadeOutTgt]).fadeOut(500);
      //
      setTimeout(function(){
      		//
          $(services[fadeInTgt]).fadeIn();
          //
          fadeProcess();
          //
      },500);
      //
  },3000);
};

fadeProcess();