image slide show

slideshow.js

$.fn.slideShow = function(fadeIn, fadeOut, length){
  var list = this;
  var ID = setInterval(function(){
    var visible = $(list).find('li:visible');
    $(visible).fadeOut(fadeOut);
    if($(visible).is(':last-child')){
      $(list).find('li:first').fadeIn(fadeIn);
    }else{
      $(visible).next().fadeIn(fadeIn);
    }
  },length);
  return ID;
};

SlideShow.md

Image Slide Show with jQuery

$.fn.slideShow = function(fadeIn, fadeOut, duration){
  var list = this;
  var ID = setInterval(function(){
    var visible = $(list).find('li:visible');
    $(visible).fadeOut(fadeOut);
    if($(visible).is(':last-child')){
      $(list).find('li:first').fadeIn(fadeIn);
    }else{
      $(visible).next().fadeIn(fadeIn);
    }
  },duration);
  return ID;
};

How to use:

• Download slideshow.js or slideshow_min.js(minified version).
• Include the file in your html.
• Use like following:

$(document).ready(function(){
  var imageID = $('#image_list').slideShow(1000, 1000, 3000);
});

You can adjust the values of fadeIn, fadeOut and duration to suit your needs!

Working fiddle

If you have any questions or innovations please leave me a comment.

patriktoma.studenthosting.sk

slideshow_min.js

$.fn.slideShow=function(b,d,e){var c=this;return setInterval(function(){var a=$(c).find("li:visible");$(a).fadeOut(d);$(a).is(":last-child")?$(c).find("li:first").fadeIn(b):$(a).next().fadeIn(b)},e)};