Simple jQuery image crossfade

crossfade.html

<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>

crossfade.js

// 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();
});

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?