javascript - 带有进度条的 Jquery 滑块

Question

我有设置和 jsfiddler：http: //jsfiddle.net/semantic/6SaJK/2/

我需要幻灯片自动旋转，每张幻灯片的进度条需要从 0 填充到 50px 宽度。我已经实现了其余的部分，但正在努力实现其余的逻辑。请注意，我想使用现有代码。谢谢你的时间。

Answer 1

你可以尝试使用这样的东西：http: //jsfiddle.net/6SaJK/28/

Answer 2

我无法发表评论，因为我在 stackoverflow 上缺乏声誉，所以我的想法就在这里。

OP，请记住，当您为滑块和进度条进行暂停时，您可能会发现时间略有不同。每个需要动画进度条的滑块的防错答案是在进度条完成他的工作时触发滑块的“下一个”事件。

使用 jQuery Cycle 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 部分现在有点混乱，因为这是我刚刚完成的开发版本，因此它没有优化，变量声明太多，但它做了它需要做的事情，而且时间没有问题。