jQuery Image carousel

Auto-transition after x # of seconds, and allow user to cancel the auto-transition by clicking a next/previous.
<div id="banner">
		<img src="/images/banners/home/banner1.jpg" alt="" />
		<span id="prev" class="move"> </span>
		<span id="next" class="move"> </span>
</div>
<script type="text/javascript">
(function() {
	var current = 0;
	var images = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg', 'banner4.jpg'];
	
	var timer = setInterval( function() { 
		doMove.call($('#next').get(0)) 
	}, 4000);
	
	$('.move').click(function() {
		clearInterval(timer);
		doMove.call(this);
	});
	var doMove = function() {
		var add = 0;
		if ($(this).attr('id') === 'prev') 
			add = -1;
		else if ($(this).attr('id') === 'next') 
			add = 1;
		
		current += add;
		
		if (current >= images.length) 
			current = 0;
		else if (current < 0) {
			current = images.length -1;
		}
		
		$('#banner img').attr('src', '/images/' + images[current]);		
	}
	
})();
</script>
Posted by
Snippet Viewed 1696 times.

Share your jQuery code snippets:

  • Get some recognition & link back to your site.

 

Submit | Browse

Most Recent jquery snippets

Most Viewed