如何將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); 
    // ... 

} 

此處理 「步進」 爲你的。它是非阻塞的，所以你可以稱它並忘記它。儘管您可能想要在goFwd()方法中實施$("#progress").stop().css({width:'0px'});以重置它。以防萬一你超越自己。玩的時機，所以它是正確的。

很明顯，您需要用切換到下一張圖像之間的毫秒數來代替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(); 
});