Home » jQuery

jQuery: A simple Slideshow

1 February 2010 4,288 views Popularity: 8% Share/Bookmark

I have made a very simple jQuery slideshow. When you click the play button, then the images changes with fade in and fade out effect.

View Demo || Download Code

I have used animate() jQuery function for fade in and out. queue() and dequeue() functions along with setTimeout() function are used to set time interval between fade in and fade out. The images are stored in javascript array.

I have well commented the code so that it would be easy to understand. Here comes the full source code.

<html>
<head>
<title>jQuery: Slideshow</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * Array of images
		 */
		var arr = [ "hills.jpg", "lilies.jpg", "sunset.jpg", "winter.jpg", "slideshow.jpg" ];

		/**
		 * When play button is clicked
		 */
		$("#play").click(function(){
			/**
			 * Foreach loop
			 */
			$.each(arr, function(i, val) {
				/**
				 * Changing div opacity to 0. 1000 is the time in ms.
				 */
				$("#sImage").animate({opacity: 0.0}, 1000);
				/**
				 * Queue function will place the event in queue
				 * Changing image src after the above animate function is completed
				 */
				$("#sImage").queue(function(){
					$("#sImage").attr("src", val);
					$("#sImage").dequeue();
				});
				/**
				 * Changing div opacity to 1. 1000 is the time in ms.
				 */
				$("#sImage").attr("src", val).animate({opacity: 1.0}, 1000);
				/**
				 * Queue function will place the event in queue
				 * Here, queue function is used to hold the changing image for 1 second display
				 */
				$("#sImage").queue(function(){
					setTimeout(function(){
						$("#sImage").dequeue();
					}, 1000);
				});
			});
		});
	});
</script>
</head>
<body>
<div align="center">
	<button id="play"> Play </button>
	<div class="slideshow">
		<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />
	</div>
</div>
</body>
</html>

View Demo || Download Code

Cheers,

From Mukesh Chapagain's Blog, post jQuery: A simple Slideshow

Related posts:

  1. jQuery: Set time interval between events with queue function
  2. jQuery: Animate and Transfer effect with Image
  3. jQuery: Preview Image with Zoom Effect
  4. Simple and easy jQuery tabs with AJAX and PHP
  5. jQuery: Print array and object
  6. jQuery: Cool Bouncing Navigation with easing plugin
  7. Magento jQuery: How to use them together?
  8. jQuery: How to replace string, div content and image src?
  9. jQuery: Preview Image with Tooltip Effect
  10. jQuery: A simple Tooltip