スライダやスライダのようなスライダにプログレスバー（タイムライン）を追加する方法

Question

JavaScriptスライドショー（SlidesJSやNivosliderなど）にプログレスバーを追加したいと思います。

私が必要とするものの一部をカバーするthis questionが見つかりましたが、私はそれを自分のスライドショーに組み込みます。例えば

Here is an example of what I'm after.

私はスライドショー（または一時停止ボタンをクリックしてください）に焦点を当てたときに、タイムラインスライダーが一時停止され、（私が移動したときに）私が再開することができます。ここで

は、私がこれまで持っているコードです：

<div id="products_example"> 
    <div id="products"> 
     <div id="slides_timeline"></div> 
     <div class="slides_container"> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a> 
      <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a> 
     </div> 
     <ul class="pagination"> 
      <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li> 
      <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li> 
     </ul> 
    </div> 
</div> 

あなたがここにハイレベルから、私はどうなるのかでこれを行うことができますが、カップルの異なる方法があります

$(function(){ 
    $('#products').slides({ 
     preload: true, 
     preloadImage: 'img/loading.gif', 
     effect: 'fade', 
     slideSpeed:300, 
     crossFade:true, 
     fadeSpeed: 500, 
     generateNextPrev: true, 
     generatePagination: false,    
     play: 5000, 
     hoverPause:true, 
     animationStart: function(){animateTimeline();}, // Function called at the start of animation 
     animationComplete: function(){}, // Function called at the completion of animation 
     slidesLoaded: function() {} // Function is called when slides is fully loaded 
    }); 
}); 

////reset timeline 
function resetTimeline(){ 
    var timeline = $("#slides_timeline"); 
    timeline.css({width:'0'},0); 
} 

////animate timeline 
function animateTimeline(){ 
    var timeline = $("#slides_timeline"); 
    timeline.stop().css({width:'0',opacity:1},0); 
    timeline.stop().animate({width:'100%'},5000,'linear',function(){$(this).animate({opacity:0,width:0})}); 
} 

$("#products .next,.pagination li a").click(function(){ 
    resetTimeline(); 
}); 

Answer 1

：

すべては、基本的にsetInterval関数を使用するかどうかにかかわらず、これらのタイプのスライドショーのうちの1つは、マウスオーバー時にタイマーをクリアするか、一時停止します。したがって、関数内で、各スライドが移動する前に表示するミリ秒数を指定する変数にアクセスできます。また、setIntervalは、次のスライドに移動する関数を起動します。私はこの変数にアクセスし、jQuery回転プラグインを駆動するために使用します。スライダ機能のミリ秒を使用して回転を微調整することができます。

https://code.google.com/p/jqueryrotate/

あなたはあなたの例では1のようなプログレスバーのスタイルをしたい場合は、基本的には同様の割合の何かに各スライドのためのミリ秒数を変換する必要があります：（現在/合計ミリ秒）* 100とそれをプログレスバーのパーセンテージ幅として適用して、アニメーション化しているように見せます。