如何将jQuery进度栏添加到幻灯片库？

Question

I have a very basic jQuery slideshow and my friend and I are trying to figure out how to add a progress bar to indicate when the gallery will switch to the next image. Here is my slideshow code that my friend and I wrote. Thanks, any help is very 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;
}

Answer 1

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

I modified the OP's js just to give an idea on how something like this could be done, overall I know there are better ways for the options to be passed etc. The main thing that I did, was modify your forward function to be called every second, then within that function it checks if the time running is greater than the time you want to make the image change. If so, it changes the image, if not it sets a progress bar element to be the % of time that has passed.

You can pass in a time to start in milliseconds such as 8000, or nothing and the default will be 5000. Anyway you should be able to gather from the code how this can be done. For a smoother/faster transition you could animate the width change, or even decrease the interval from 1000, to something 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);

Answer 2

Similar to Loktar's answer I have done something like this in the past:

function forward() {

  // ...
  $("#progress").animate({width:'100%'}, options.interval);
  // ...

}

This handles the "stepping" for you. It's non-blocking so you can just call it and forget it. Though you may want to implement a $("#progress").stop().css({width:'0px'}); in your goFwd() method to reset it. Just in case you are getting ahead of yourself. Play with the timing so it's just right.

Obviously you need to replace options.interval with your milliseconds between switching to the next image. For your implementation I believe that would be: 4900 since the other stuff you're doing (like loading the full-size image) will take a few milliseconds. The human eye probably won't notice the delay of less than a hundred milliseconds.

Answer 3

I modified Loktars example adding in sholsingers sample and here is the result: http://jsfiddle.net/AASYC/85/

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval, progressInterval,
timeStep = 5000,
lastTime = (new Date()).getTime();

$('#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);
    $("#progress").stop().css({width:'0px'});
}

function forward() {
    cur.fadeOut(1000);
    if (cur.attr('class') == 'last')
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn(1000);
    $("#progress").stop().css({width:'0px'});
}

function startSlideShow() {
var curTime = (new Date()).getTime() - lastTime;

 if(curTime > timeStep)
 {
    lastTime = (new Date()).getTime();
    $("#progress").stop().css({width:'0px'});
    cur.fadeOut(1000);
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();

    cur.fadeIn(1000);
}
else
{
    if($("#progress:animated").length < 1)
    {
        $("#progress").animate({width: "100%"}, 4900);
    }                        
}
}


function showPause() {
$('#play').hide();
$('#stop').show();
}

function showPlay() {
$('#stop').hide();
$('#play').show();
}

function start(changeInterval) {
if(changeInterval){
    timeStep = changeInterval;
}
interval = setInterval( function(){ startSlideShow();}, 500);
}

function stop() {
$("#progress").stop().css({width:'0px'});
clearInterval( interval );
lastTime = (new Date()).getTime();
}

$(function() {
    start();
} );