Edit in JSFiddle

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval;

$('#fwd').click( function() {
	goFwd();
	showPause();
} );

$('#back').click( function() {
	goBack();
	showPause();
} );

$('#stop').click( function() {
	stop();
	showPlay();
} );

$('#play').click( function() {
	start();
	showPause();
} );

function goFwd() {
	stop();
	forward();
	start();
}

function goBack() {
	stop();
	back();
	start();
}

function back() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'first' )
		cur = $('.ppt li:last');
	else
		cur = cur.prev();
	cur.fadeIn( 1000 );
}

function forward() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

function showPause() {
	$('#play').hide();
	$('#stop').show();
}

function showPlay() {
	$('#stop').hide();
	$('#play').show();
}

function start() {
	interval = setInterval( "forward()", 1 );
}

function stop() {
	clearInterval( interval );
}

$(function() {
	start();
} );
<button type="button" id="back">Back</button>
<button type="button" id="fwd">Forward</button>

<ul class="ppt">
	<li><img src="http://imgur.com/f46CBOV.jpg" alt="Ethernet Cable"></li>
	<li><img src="http://imgur.com/mvfkin5.jpg" alt="Spectacles"></li>
	<li><img src="http://imgur.com/lZ5vmu0.jpg" alt="Leaning Tower of Pisa"></li>
</ul>
ul.ppt {
	position: relative;
}

.ppt li {
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}

.ppt img {
	border: 1px solid #e7e7e7;
	padding: 5px;
	background-color: #ececec;
}