JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="page1_image"><img src="http://dummyimage.com/300x200/444/fff&text=Image+1" /></div>
<div id="page2_image"><img src="http://dummyimage.com/300x200/444/fff&text=Image+2" /></div>
<div id="page3_image"><img src="http://dummyimage.com/300x200/444/fff&text=Image+3" /></div>

CSS

div { position: absolute; }

JavaScript

$(function() {
  var images = ['#page1_image', '#page2_image', '#page3_image'], i = 0;
  function rotate() {
    $(images[i]).fadeOut(10000);
    i = (i+1)%images.length;
    console.log(i);
    $(images[i]).fadeIn(10000, rotate);
  } 
  $.each(images.slice(1), function(index, val) { $(val).hide(); });
  rotate();  
});