Very basic slide show using jquery.
/* | |
Simple continuous slide show using JQuery. | |
Usage: | |
<div id="slides"> | |
<div class="slide">First</div> | |
<div class="slide">Second</div> | |
<div class="slide">Third</div> | |
</div> | |
<script type="application/javascript">$("#slides").slide({delay: 5000});</script> | |
Copyright (c) 2011 - R.W. van 't Veer | |
*/ | |
(function ($) { | |
$.fn.slide = function(options) { | |
var options = $.extend({delay: 2000}, options); | |
return this.each(function () { | |
var container = $(this).css({ | |
position: "relative" | |
}); | |
var slides = $(this).find(".slide").css({ | |
position: "absolute" | |
}); | |
var slider = function() { | |
var current = $(this), next = $(this).next(".slide"); | |
if (next.size() == 0) { | |
next = $(this).parent().children(".slide").first(); | |
} | |
setTimeout(function() { | |
current.css({zIndex: 2}).show(); | |
next.css({zIndex: 1}).show().animate({}, | |
{complete: slider}, | |
options.delay); | |
current.fadeOut("slow"); | |
}, options.delay); | |
}; | |
slides.not(":first").hide(); | |
slides.first().animate({}, {complete: slider}, options.delay); | |
}); | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment