Add to Favorites
Simple Slideshow with Jquery
Jul 26, 2010
by
0
Here is a very simple way to create a slideshow using jquery.
Setup your xhtml as follows:
<div style="position: relative;">
<div id="slideshow1" style="position: absolute;"><img src="one.jpg" /></div>
<div id="slideshow2" style="position: absolute;display: none;"><img src="two.jpg" /></div>
<div id="slideshow3" style="position: absolute;display: none;"><img src="three.jpg" /></div>
</div>
Each div containing an image is positioned absolutely so that they will lay on top of each other within the container box. It is important that the container box be position relative so that the absolutely positioned children stay within the designated area.
You can then use some very simple javascript to make these fade in/out in order.
<script type="text/javascript">
var end_frame = 3;
var cur_frame = 1;
var delay = 7000;
function switch_slides() {
$('#slideshow' + cur_frame).fadeOut(600);
if (cur_frame == end_frame) { cur_frame = 1; } else { cur_frame = cur_frame + 1; }
$('#slideshow' + cur_frame).fadeIn(600, function() {
setTimeout('switch_slides()', delay);
});
}
setTimeout('switch_slides()', delay);
</script>
This javascript is simple. It sets a timeout to start an effect that switches slides to the next slide. The function that switches slides fades out the current image, increments the current image counter, fades in the next image, then sets up another timeout to switch slides again.
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube