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を変更ちょうどどのようにこのようなことができるかについてのアイデア、全体的に私は、オプションが渡されるためのより良い方法があることを知っています。私がした主なことは、毎秒呼び出される順関数を変更し、実行時間が画像を変更したい時間よりも長い場合そうであれば、イメージを変更し、そうでなければプログレスバー要素を経過した時間の割合に設定します。

ミリ秒単位で入力するか、何も入力せずに何も入力しないでください。デフォルト値は5000になります。これでどのようにコードを集めることができるでしょうか。スムーズに/より速く移行するには、幅の変化をアニメートするか、間隔を1000からさらに小さくすることもできます。

主な変更Loktarの答えと同様に

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

私は過去にこのような何かを行っている：

function forward() { 

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

} 

これはあなたのために、 "ステッピング" を処理します。それはノンブロッキングなので、あなたはそれを呼び出して忘れることができます。 goFwd()メソッドに$("#progress").stop().css({width:'0px'});メソッドを実装してリセットすることもできますが、ちょうどあなたが自分より先に進んでいる場合に備えて。それがちょうどいいので、タイミングで遊んでください。

明らかに、options.intervalを次の画像に切り替えるまでにミリ秒単位で置き換える必要があります。実装には、4900と思っています。これは、フルサイズの画像を読み込むなどの作業が数ミリ秒かかるためです。人間の目はおそらく100ミリ秒未満の遅延に気付かないでしょう。

Answer 3

Iはsholsingersサンプルに添加し、ここでの結果であるLoktarsの変形例： 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(); 
});