javascript - プログレスバー付きのJqueryスライダー

Question

私はセットアップと jsfiddler を持っています: http://jsfiddle.net/semantic/6SaJK/2/

スライドを自動回転にする必要があり、各スライドの進行状況バーは 0 から 50px の幅で埋める必要があります。残りは実装しましたが、残りのロジックを実装するのに苦労しています。既存のコードを使用したいことに注意してください。御時間ありがとうございます。

Answer 1

次のようなものを使用してみることができます: http://jsfiddle.net/6SaJK/28/

Answer 2

私はstackoverflowでの評判が悪いのでコメントできません。私の考えはここにあります。

OP、スライダーとプログレスバーの一時停止に取り組んでいるときは、タイミングにわずかな違いが生じる可能性があることを覚えておいてください. プログレスバーをアニメーション化する必要があるすべてのスライダーのバグ防止の答えは、プログレスバーが仕事を終えたときにスライダーの「次の」イベントを発生させることです。

jQuery サイクル 2 では、次のような方法で実現できます。

function main_slider() {

    if ( $("#slider").length ) {

    var $time = 7000;
    var $speed = 500;
    var $slide_width = $("#slider").width()

    $("#slider .cycle").on("cycle-initialized", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      var propWidth = $animator.width() / $progress.width() * 100;

      $animator.animate({
        width: "100%"
      }, $time * (100 - propWidth) / 100, function(){
        $("#slider .cycle").cycle("next");
      });

    });    

    $("#slider .cycle").cycle({
      fx: "scrollHorz",
      timeout: 0,
      speed: $speed,
      slides: "li",
      next: "#slider nav .next",
      prev: "#slider nav .prev",
      pauseOnHover: true,
      sync: true,
      delay: 0,
      hideNonActive: false,
      pager: "#slider .pager ul",
      pagerTemplate: "<li><a href='#'></a></li>"

    });


    $("#slider .cycle").on("cycle-before", function(event, opts) {
      $("#slider .progress .animator").stop(true).animate({"width": 0}, 0);
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next"); //everything is a trick :)
      });
    })

    $("#slider .cycle").on("cycle-paused", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      $animator.stop(true);
    })

    $("#slider .cycle").on("cycle-resumed", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      var propWidth = ($animator.width() / $progress.width()) * 100;

      $animator.animate({
        width: "100%"
      }, $time * ((100 - propWidth) / 100), function(){
        $("#slider .cycle").cycle("next");
      });

    });

    $("#slider .cycle").on("cycle-next", function(event, opts){
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      $animator.stop(true).width(0);

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next");
      });
    }).on("cycle-prev", function(event, opts){
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      $animator.stop(true).width(0);

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next");
      });
    })

    $("#slider").mouseenter(function(){
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $duration = 500

      $prev.stop().animate({
        opacity: 1,
        left: 0
      }, $duration)

      $next.stop().animate({
        opacity: 1,
        right: 0
      }, $duration)

    }).mouseleave(function(){
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $duration = 500
      $prev.stop().animate({
        opacity: 0,
        left: "-46px"
      }, $duration)
      $next.stop().animate({
        opacity: 0,
        right: "-46px"
      }, $duration)
    })

    function position_controls() {
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $slider = $("#slider li");

      var $sliderH = $slider.height();
      var $controlH = $prev.height();

      var $center = ($sliderH/2) - ($controlH/2);

      $prev.css("top", $center+"px");
      $next.css("top", $center+"px");

    }

    position_controls();

    $(window).resize(function(){
      position_controls();
    })

  }

}

main_slider();

そしてhtml構造は次のとおりです。

<section id="slider">
  <nav><a href="#" class="next"></a><a href="#" class="prev"></a></nav>
  <ul class="cycle">
    <li><a href="#"><img src="images/slide1.jpg" /></a></li>
    <li><a href="#"><img src="images/slide2.jpg" /></a></li>
    <li><a href="#"><img src="images/slide1.jpg" /></a></li>
    <li><a href="#"><img src="images/slide2.jpg" /></a></li>
  </ul>
  <div class="progress"><div class="animator"></div></div>
  <div class="pager"><ul></ul></div>
</section>

これは私が完成したばかりの開発バージョンであり、最適化されていないため、jQuery の部分は少し面倒です。変数の宣言が多すぎますが、必要なことは実行され、タイミングに問題はありません。