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.
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.
Here is 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>
Cheers,