如何將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();
} );