Skip to content

Instantly share code, notes, and snippets.

@jkgraham
Created October 22, 2012 16:48
Show Gist options
  • Save jkgraham/3932497 to your computer and use it in GitHub Desktop.
Save jkgraham/3932497 to your computer and use it in GitHub Desktop.
Simple jQuery image crossfade
<script src="/js/crossfade.js" type="text/javascript"></script>
<style type="text/css">
#home_slides { position: relative; width: 960px; height: 350px;}
#home_slides img { position: absolute; z-index: 1; display: none; }
#home_slides img.active { display: block; z-index: 3; }
</style>
<div id="home_slides">
<img src="/slides/slide-01.jpg" class="active">
<img src="/slides/slide-02.jpg">
<img src="/slides/slide-03.jpg">
<img src="/slides/slide-04.jpg">
<img src="/slides/slide-05.jpg">
<img src="/slides/slide-06.jpg">
<img src="/slides/slide-07.jpg">
</div>
// All credit to: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
(function(window) {
SlideCrossFade = {
container: 'home_slides',
displayTime: 5000,
fadeTime: 1500,
start: function() {
var self = this;
$('#' + this.container + ' img').show();
setInterval(function() { self.next(); }, this.displayTime);
},
next: function() {
var $active = $('#' + this.container + ' .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#' + this.container + ' img:first');
$next.css('z-index', 2);
$active.fadeOut(this.fadeTime, function() {
$active.css('z-index', 1).show().removeClass('active');
$next.css('z-index', 3).addClass('active');
});
}
};
window.SlideCrossFade = SlideCrossFade;
})(this);
$(window).load(function() {
SlideCrossFade.start();
});
@teetlaja
Copy link

Hi, found out that after displaying last slide it shows previous slide before last for a moment before restarting the loop from beginning. Any ideas how to fix that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment