Edit in JSFiddle

var images = [];
var iig = 0;

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

function resizer() {
	iw = window.innerWidth;
	$( ".p2" ).css({ height: ( iw / 6 / 1.6 * 3 ) + "px" });
	$( ".p2 td" ).css({ height: ( iw / 6 / 1.6 ) + "px" });
	$( ".firstTD" ).css({ height: ( iw / 6 / 1.6 * 3 ) + "px" });
	$( ".lastTD" ).css({ height: ( iw / 6 / 1.6 * 2 ) + "px" });
}

function loadImage() {
	for (i = 0; i < loadImage.arguments.length; i++) {
		images[i] = new Image();
		images[i].src = loadImage.arguments[i];
		images[i].className = "p2Image";
	}
}

function load2Gal( imgs, first ) {
	iig = 0;
  $( "td" ).each( function( tdK, tdV ) {
  	if( first ) {
    	$( tdV ).css({ backgroundImage: "url(" + imgs[iig].src + ")" });
    } else {
			$( tdV ).html( "<div class='p2Ov' style='background-image: url(" + imgs[iig].src + "); height: 100%; ' ></div>" );
			$( ".p2Ov" ).animate({
				opacity: "1"
			}, 2000, function() {
				var bg = $( tdV ).find( "div" ).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
				$( tdV ).css({ backgroundImage: "url(" + bg + ")" });
				$( tdV ).html( "" );
			});
    }
    iig++;
  });
}

$( document ).ready( function() {
  loadImage(
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=2266aa&txtclr=ffffff&txt=img1&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=aa2266&txtclr=ffffff&txt=img2&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=22aa66&txtclr=ffffff&txt=img3&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=6622aa&txtclr=ffffff&txt=img4&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=66aa22&txtclr=ffffff&txt=img5&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=aa6622&txtclr=ffffff&txt=img6&w=200&h=150&fm=png",
    "https://placeholdit.imgix.net/~text?txtsize=60&bg=222222&txtclr=ffffff&txt=img7&w=200&h=150&fm=png"	
  );

	resizer();
	load2Gal( shuffle( images ), true );
  setInterval( function() {
  	load2Gal( shuffle( images ), false );
  }, 5000);


});

$( window ).resize(function() {
	resizer();
});

<table class="p2">
        <tr>
            <td class='firstTD' rowspan="3" colspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr><tr>
            <td></td>
            <td class='lastTD' rowspan="2" colspan="2"></td>
        </tr><tr>
            <td></td>
        </tr>
    </table>

<br><br><br>

table {
	border-collapse: collapse;
	width: 100%; 
  height: 250px; 
	table-layout: fixed;
}

table td {
	border: 7px solid rgb( 100, 120, 150 );
	background-size: 100% auto;
  background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer; 
	cursor: hand;
}

.firstTD {
   width: 50%; 
}

.p2Ov {
	background-size: 100% auto;
  background-repeat:no-repeat;
	opacity: 0;
}