settings = {
  fadeSpeed: 600,
  displayTime: 6000,  // in milliseconds
  
  containerSelector: '#imagechanger' // img elements in a div with this id
}

$(document).ready(function(){
  var $images = $(settings.containerSelector+' img');
  
  // hide all but first
  $images.each(function(index) {
    if (index != 0)
      $(this).hide();
  });
  
  // This object keeps track of which image is currently displayed. Calling
  // index.next() will advance the index and return this new index.
  var index = {
    current: 0,
    max: 0,
    next: function() {
      if (this.current == this.max)
        this.current = 0;
      else
        this.current++;
      return this.current;
    },
    prev: function() {
      if (this.current == 0)
        this.current = this.max;
      else
        this.current--;
      return this.current;
    }
  };
  index.max = $images.length-1;
  
  // Display the next image
  var next = function() {
    $images.eq(index.current).fadeOut(settings.fadeSpeed, function() {
      $images.eq(index.next()).fadeIn(settings.fadeSpeed);
    });
  };
  
  // Display the previous image
  var prev = function() {
    $images.eq(index.current).fadeOut(settings.fadeSpeed, function() {
      $images.eq(index.prev()).fadeIn(settings.fadeSpeed);
    });
  };
  
  // Start automatic slideshow
  var timer = window.setInterval(next, settings.displayTime);
  
  // When an image is clicked, the next one is shown immediately, then the
  // slideshow continues
  $images.click(function() {
    window.clearInterval(timer);
    next();
    timer = window.setInterval(next, settings.displayTime);
  });
});