Image Slideshow
/*!
* 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 );
});
}
<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>