HTML

Question

我正在尝试构建一个简单的图像滑块，一切正常，但现在确定为什么表示活动滑块时间的进度条表现不正常，就像字幕文本一样。

Jsfiddle：http://jsfiddle.net/2gayfub0/7/

请你看看并指出正确的方向吗？谢谢

HTML

<div id="cycler">

    <img class="active" src="http://dummyimage.com/600x400/000/fff.jpg&text=slide1">
    <span>text for slider 1</span>

    <img src="http://dummyimage.com/600x400/000/fff.jpg&text=slide2">
    <span>text for slider 2</span>

    <img src="http://dummyimage.com/600x400/000/fff.jpg&text=slide3">
    <span>text for slider 3</span>  

</div>


<div class="bar">

    <div class="grow">&nbsp;</div>

</div>

JS

function cycleImages(){
      var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');

      $('.grow').width('0px');

      $('.grow').animate( {'width': '100%'}, 2000);

      $next.css('z-index',2);

      $active.fadeOut(1000,function(){

        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');

      });
}

$(document).ready(function(){


  var $slider = $('#cycler');
  var interval;

  function startSlider() {
    interval = setInterval('cycleImages()', 2000);
  }

  function stopSlider() {
    clearInterval(interval);
  }

  $slider.on('mouseenter',stopSlider).on('mouseleave', startSlider);

  $('.grow').animate( {'width': '100%'}, 2000);
  startSlider();


})

Answer 1

页面不在

之间重绘

    $('.grow').width('0px');

和

    $('.grow').animate( {'width': '100%'}, 2000);

因此，当页面重绘时，您只看到它闪烁0px然后整个条形图。您需要执行setTimeout以使其在0px宽度后重绘，然后启动动画。不幸的是，这也会导致异步行为，这也可能是一种痛苦。

带有进度条的简单jquery图像滑块

HTML

JS

1 个答案: