Javascript 带进度条的Jquery滑块

我有安装程序和jsfiddler：

---

我需要幻灯片处于自动旋转状态，每个幻灯片的进度条需要填充0到50px的宽度。我已经实现了其余的部分，但仍在与要实现的其余逻辑进行斗争。请注意，我想使用现有的代码。谢谢您的时间。

您可以尝试使用这样的方式：

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

哦，请记住，当您使用“暂停”滑块和进度条时，您可以在计时上获得细微的差异。对于需要设置动画进度条的每个滑块，防bug的答案是在进度条完成其工作时触发滑块的“下一个”事件

使用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();

函数主\u滑块（）{
如果（$（“#滑块”）.length）{
var$time=7000；
var$speed=500；
var$slide_width=$（“#slider”）.width（）
$（“#slider.cycle”）。打开（“循环初始化”，函数（事件，选项）{
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
var propWidth=$animator.width（）/$progress.width（）*100；
$animator.animate({
宽度：“100%”
}，$time*（100-propWidth）/100，函数（）{
$（“#slider.cycle”）.cycle（“下一步”）；
});
});    
$（“#slider.cycle”）.cycle({
特效：“卷轴”，
超时：0，
速度：$speed，
幻灯片：“李”，
下一步：#滑块导航。下一步“，
上一页：#滑块导航上一页“，
pauseOnHover:是的，
是的，
延迟：0，
hideNonActive:false，
寻呼机：“#滑块。寻呼机ul”，
页面模板：
“
});
$（“#slider.cycle”）。打开（“之前循环”，函数（事件，选项）{
$（“#slider.progress.animator”）.stop（true）。设置动画（{“width”：0}，0）；
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
$animator.animate({
宽度：“100%”
}，$time，function（）{
$（“#slider.cycle”）.cycle（“next”）//一切都是骗局：）
});
})
$（“#slider.cycle”）。打开（“循环暂停”，函数（事件，选项）{
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
$animator.stop（true）；
})
$（#slider.cycle”）。打开（“循环恢复”，函数（事件，选项）{
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
var propWidth=（$animator.width（）/$progress.width（））*100；
$animator.animate({
宽度：“100%”
}，$time*（（100-propWidth）/100），function（）{
$（“#slider.cycle”）.cycle（“下一步”）；
});
});
$（“#slider.cycle”）。打开（“循环下一步”，函数（事件，选项）{
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
$animator.stop（true）.宽度（0）；
$animator.animate({
宽度：“100%”
}，$time，function（）{
$（“#slider.cycle”）.cycle（“下一步”）；
});
}).on（“循环前”，功能（事件，选项）{
变量$slider=$（“#slider”）；
var$progress=$（“#slider.progress”）；
var$animator=$（“#slider.progress.animator”）；
$animator.stop（true）.宽度（0）；
$animator.animate({
宽度：“100%”
}，$time，function（）{
$（“#slider.cycle”）.cycle（“下一步”）；
});
})
$（“#滑块”）.mouseenter（函数（）{
var$prev=$（“#slider nav.prev”）；
var$next=$（“#slider nav.next”）；
var$duration=500
$prev.stop（）.animate({
不透明度：1，
左：0
}，$duration）
$next.stop（）.animate({
不透明度：1，
右：0
}，$duration）
}).mouseleave（函数（）{
var$prev=$（“#slider nav.prev”）；
var$next=$（“#slider nav.next”）；
var$duration=500
$prev.stop（）.animate({
不透明度：0，
左：“-46px”
}，$duration）
$next.stop（）.animate({
不透明度：0，
右：“-46px”
}，$duration）
})
功能位置控制（）{
var$prev=$（“#slider nav.prev”）；
var$next=$（“#slider nav.next”）；
变量$slider=$（“#slider li”）；
var$sliderH=$slider.height（）；
var$controlH=$prev.height（）；
变量$center=（$sliderH/2）-（$controlH/2）；
$prev.css（“顶部“，$center+px”）；
$next.css（“top”，$center+px”）；
}
位置控制（）；
$（窗口）。调整大小（函数（）{
位置控制（）；
})
}
}
主_滑块（）；

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

并且您可能需要从单击手柄调用

run（）

函数hank you@Ulan，这太棒了，它就快到了，但我想在每次幻灯片更改时为进度条

元素的特定索引设置动画。不是完整的进度条。如果这样做了，我很高兴。谢谢你的时间。好的，然后看看这个，希望这就是你打算做的：谢谢乌兰，这是我所需要的全部，剩下的我将处理它，当鼠标移到项目上时暂停它。单击项目时，它应该与每个索引元素协调。