javascript - How do I add jQuery progress bar to slideshow gallery? -

i have basic jquery slideshow , friend , trying figure out how add progress bar indicate when gallery switch next image. here slideshow code friend , wrote. thanks, appreciated.

/* javascript */

$('.ppt li:gt(0)').hide(); $('.ppt li:last').addclass('last'); $('.ppt li:first').addclass('first'); $('#play').hide();  var cur = $('.ppt li:first'); var interval;  $('#fwd').click( function() {     gofwd();     showpause(); } );  $('#back').click( function() {     goback();     showpause(); } );  $('#stop').click( function() {     stop();     showplay(); } );  $('#play').click( function() {     start();     showpause(); } );  function gofwd() {     stop();     forward();     start(); }  function goback() {     stop();     back();     start(); }  function back() {     cur.fadeout( 1000 );     if ( cur.attr('class') == 'first' )         cur = $('.ppt li:last');     else         cur = cur.prev();     cur.fadein( 1000 ); }  function forward() {     cur.fadeout( 1000 );     if ( cur.attr('class') == 'last' )         cur = $('.ppt li:first');     else         cur = cur.next();     cur.fadein( 1000 ); }  function showpause() {     $('#play').hide();     $('#stop').show(); }  function showplay() {     $('#stop').hide();     $('#play').show(); }  function start() {     interval = setinterval( "forward()", 5000 ); }  function stop() {     clearinterval( interval ); }  $(function() {     start(); } ); 

/* html */

        <ul class="ppt">             <li><img src="images/show_1_banner.jpg"></img></li>             <li><img src="images/show_2_banner.jpg"></img></li>         </ul>         <div id="buttons">             <button type="button" id="back" title="previous"></button>             <button type="button" id="stop" title="stop"></button>             <button type="button" id="play" title="play"></button>             <button type="button" id="fwd" title="next"></button>         </div> 

/* css */

ul.ppt {position: relative;}  .ppt li {     position: absolute;     width:770px;     height:460px; }  .ppt img {     width:750px;     height:440px;     margin:0 auto;     display:block;     margin-top:10px; } 

http://jsfiddle.net/loktar/aasyc/3/

i modified op's js give idea on how done, overall know there better ways options passed etc. main thing did, modify forward function called every second, within function checks if time running greater time want make image change. if so, changes image, if not sets progress bar element % of time has passed.

you can pass in time start in milliseconds such 8000, or nothing , default 5000. anyway should able gather code how can done. smoother/faster transition animate width change, or decrease interval 1000, lower.

main changes

var interval,     timestep = 5000,     lasttime = (new date()).gettime();      function forward() {     var curtime = (new date()).gettime() - lasttime;     if(curtime > timestep){          lasttime = (new date()).gettime();         cur.fadeout( 1000 );         if ( cur.attr('class') == 'last' )             cur = $('.ppt li:first');         else             cur = cur.next();             cur.fadein( 1000 );     }else{         $("#progress").width(curtime/timestep * 100 + "%");       } }  interval = setinterval( function(){forward();}, 1000);