Simple JQuery Slideshow

JQuerySlideshow.js

<!-- Slideshow courtesy of http://snook.ca/archives/javascript/simplest-jquery-slideshow - with slight amendment to add in pause/play functionality -->

<style>
.fadein { position:relative; height:300px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<script>
var enableSlideshow = true;

$(function(){
	if (enableSlideshow){$('.fadein img:gt(0)').hide();}
	setInterval(function(){if (enableSlideshow){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}}, 2000);
});
</script>


<div class="fadein">
<img src="0.jpg" width="495" height="296" />
<img src="1.jpg" width="495" height="296" />
<img src="2.jpg" width="495" height="296" />
</div>

<div>
<a id="pause" class="btn" onclick="enableSlideshow = false;">||</a>
<a id="nextLink" class="btn" onclick="enableSlideshow = true;">&gt;</a>
</div>

See blog post at http://blog.bravelocation.com/making-a-jquery-slideshow and the original article by Jonathan Snook at http://snook.ca/archives/javascript/simplest-jquery-slideshow