Simple JQuery slide show
For example you have couple of photos with this html
1 2 3 4 5 6 7 8 9 10 |
first you need it add style
1 2 3 | #photos ul li { display:none; } |
load jquery library and add my simple code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(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
