A CodePen by A Non Ymous.

index.html

<ul class="simple-gallery">
  <li class="show">
    <img src="http://minimalmonkey.com/examples/simple-gallery/images/image-1.jpg" />
  </li>
  <li>
    <img src="http://minimalmonkey.com/examples/simple-gallery/images/image-2.jpg" />
  </li>
  <li>
    <img src="http://minimalmonkey.com/examples/simple-gallery/images/image-3.jpg" />
  </li>
</ul>

script.js

(function() {

	var items = $('.simple-gallery li');
	var total = items.length;
	var current = 0;

	setInterval(function() {
		$(items[current]).removeClass('show');
		++current;
		if(current >= total) current = 0;
		$(items[current]).addClass('show');
	}, 3000);

})();

style.css

body {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

ul, li {
	margin: 0;
	padding: 0;
}

li {
	-webkit-transition: opacity 1s, margin-left 0s linear 0.4s;
	-moz-transition: opacity 1s, margin-left 0s linear 0.4s;
	-o-transition: opacity 1s, margin-left 0s linear 0.4s;
	transition: opacity 1s, margin-left 0s linear 0.4s;

	height: 0;
	left: 0;
	margin-left: -99999px;
	opacity: 0;
	overflow: hidden;
	padding-bottom: 50%;
	position: absolute;
	top: 0;
}

.show {
  -webkit-transition: opacity 1s, margin-left 0s;
	-moz-transition: opacity 1s, margin-left 0s;
	-o-transition: opacity 1s, margin-left 0s;
	transition: opacity 1s, margin-left 0s;
  
	margin-left: 0;
	opacity: 1;
}