JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="img-holder">
  <img id="img1">
  <img id="img2">
</div>

CSS

#img-holder {
  position: relative;
  height: 300px;
}

#img-holder img {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var imgArray = new Array("http://www.barradobugresonline.com.br/images/destaquesn/08_Dodge_Challenger_SRT8_58_(400x300).jpg", "http://community.coreldraw.com/cfs-file/__key/telligent-evolution-components-attachments/00-245-01-00-00-07-32-08/Photoshop-400x300.jpg");
var current = $("#img1"),
  counter = 0;

function startTime() {
  counter++;
  if (counter == imgArray.length) counter = 0; //set counter to 0 again if full array image has been faded and showed
  var bottomImg = current.attr('id') == "img1" ? $("#img2") : $("#img1"); // get and store id of image at bottom in bottomImg
  bottomImg.attr('src', imgArray[counter]);  
  current.animate({ /* fade out current image */
    opacity: 0
  }, 1000, function() {    
    // this is called after fade out is COMPLETE
    current.css("z-index", 1); //set current which is now faded out at bottom of the image being showed now
    bottomImg.css("z-index", 2);
    current.css("opacity", 1); //set opacity if the image which is now at back to 1
    current = bottomImg; //now bottom img is current so change it
    setTimeout(startTime, 4000);
  });
}


$(function() {
  $("#img1").css("z-index", 2); // make img1 over img2
  $("#img2").css("z-index", 1);
  $("#img1").attr('src', imgArray[0]); // set the first image in array on page load without any fade  
  setTimeout(startTime, 4000); //start the timer to change image with effects
});