Simple Slideshow using timer, javascript and JQuery

Here is the code to create a simple slideshow using timer, JavaScript and JQuery.

The html file contents should be like this which has all the images to show up.

<div class="galleryImages">
<img src='Images/Slides/0.png' alt="" />
<img src='Images/Slides/1.png' alt="" />
<img src='Images/Slides/2.png' alt="" />
<img src='Images/Slides/3.png' alt="" />
</div>
 The 'galleryImages' class is defined like this.

.galleryImages {
position: relative;
height: 350px;
width:700px;
overflow: hidden;
border:solid;
border-color:black;
border-width:thin;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
margin:10px;
}
 .galleryImages img {
position: absolute;
top: 0;
left: 0;
}


The JavaScript code should be like this.

var slideShowTimer;
var imageId = 0;
var galleryImages;
var transitionSpeed = 500;
function PerformInitialization() {
SetupTimer();galleryImages = $('.galleryImages img');
}
 function SetupTimer() {
slideShowTimer = setInterval(ChangePhoto, 3000);
}
 function ChangePhoto() {
galleryImages.eq(imageId).stop(true, true).animate({ opacity: 0 }, transitionSpeed);
imageId++;if (imageId >= galleryImages.length) {
imageId = 0;
}galleryImages.eq(imageId).stop(true, false).animate({ opacity: 1 }, transitionSpeed);
}
Make sure to call PerformInitialization() function during "onload" of the body of the html file.

Also make sure to add these "JQuery" references.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
   
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css" />

Have fun. Happy coding.

Cheers
Adam