Image Slideshow

gistfile1.html

<div id="slider1" class="slider">
  <img src="http://www.schrankmonster.de/content/binary/astronomy_day.jpg"></img>
  <img src="http://imagenes.publico.es/resources/archivos/2011/12/5/1323109544448planetadn.jpg"></img>
  <img src="http://img.ehowcdn.com/article-new/ehow/images/a04/t9/al/astronomy-science-fair-ideas-800x800.jpg"></img>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="slideshow.js"></script>

<script>
  //usage example
  $(document).ready(function() {
    playSlideshow("slider1",true, 1); 
  });
</script>

slideshow.js

/*!
 * Image Slideshow v1.0
 * Author: Oded Sagir
 * http://oded.me/
 *
 * Requires jQuery
 *
 *
 */


/**
* playSlideshow: creates a slideshow off a container child img element
* params:
* @images - can be either the id of the parent element holding the img elements, or a jquery list of img elements
* @random - if true randomizes the order of the displayed images otherwize preserves the order inwhich the elements are defined
* @seconds - image change frequency in seconds
* @index - You can specify an index of an image you wish to start with. 
* @_index - a private param used in the internal recursion of this function. 
**/
function playSlideshow( images, random, seconds, index, _index) {
  if(typeof images === "string"){
    images = $("#" + images + " img");
  }
  _index = _index == undefined ? 0 : _index;
  var i;
  if(random){
    do{
      i = Math.floor(Math.random() * images.length);
    }while(i == _index);
  }else{
    i = (_index+1)%images.length;
  }
  _index = index == undefined ? i : index;      
  images.hide();
  $(images.get(_index)).fadeIn('slow', function(){
    window.setTimeout( function(){playSlideshow( images, random, seconds, null ,_index)}, seconds*1000 );      
  });
}

a basic slideshow.

just place all your IMG elements in a container element and call this function. features: - choose the image from which to start - random slideshow vs ordered - control slide interval - runs anywhere

requires jquery.