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

Question

我有一个非常基本的jQuery幻灯片演示，我和我的朋友，我试图弄清楚如何添加进度条以指示图库何时将切换到下一张图像。 这是我和朋友写的幻灯片演示代码。 谢谢，非常感谢您的帮助。

/ * 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/

我修改了OP的js只是为了给出如何完成此操作的想法，总的来说，我知道有更好的方法可以传递选项等。其次，然后在该函数中检查运行时间是否大于您要更改图像的时间。 如果是这样，它将更改图像；如果不是，则将进度条元素设置为已过时间的百分比。

您可以输入以毫秒为单位的时间（例如8000），或者不输入任何值，默认值为5000。无论如何，您应该能够从代码中收集如何完成此操作。 为了更平滑/更快地过渡，您可以设置宽度变化的动画效果，甚至可以将间隔从1000减小到更小。

主要变化

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

类似于Loktar的回答，我过去做过这样的事情：

function forward() {

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

}

这将为您处理“步进”。 它是非阻塞的，因此您可以调用它而忘记它。 尽管您可能想实现$("#progress").stop().css({width:'0px'}); 在您的goFwd()方法goFwd()其重置。 以防万一您超越自己。 把握时机，这是正确的。

显然，您需要在切换到下一个图像之间的毫秒数内替换options.interval 。 对于您的实现，我认为应该是： 4900因为您正在执行的其他操作（例如加载全尺寸图像）将花费几毫秒。 人眼可能不会注意到不到一百毫秒的延迟。

Answer 3

我修改了Loktars示例，添加了sholsingers示例，结果如下： 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();
} );