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()来重置它。以防你超越自己。玩时间，所以它恰到好处。

显然，您需要在切换到下一个图像之间用毫秒替换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();
} );

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

3 个答案: