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
