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

带进度条的Jquery滑块

2 个答案: