My Blog

For example you have couple of photos with this html

 <div id="photos">
  <ul>
         <li><img src="/img/1.jpg" /></li>
         <li><img src="/img/2.jpg" /></li>
         <li><img src="/img/3.jpg" /></li>
         <li><img src="/img/4.jpg" /></li>
         <li><img src="/img/5.jpg" /></li>
         <!– any count you want –>
  </ul>
</div>

first you need it add style

#photos ul li {
    display:none;
}

load jquery library and add my simple code

$(function(){

    $('#photos ul li:first').show(); // display first photo

    changePhoto = function() {
        index = 0;
        return function() {
            active = $("#photos ul li:eq("+index+")");
            index++;
            el = $("#photos ul li:eq("+index+")");
            if(!el.length) {
                index = 0;
            }
            $(active).fadeOut("slow",function() {
                $("#photos ul li:eq("+index+")").fadeIn("slow");
            });
        }
    }
    intId = setInterval(changePhoto() , 6000); // set interval for changing photo to 6 sec

});


See preview below, if you want you could download example from here

Tags: jQuery, slide show