Question

嗨大家我需要你的帮助我正在创建一个推荐滑块我需要一个带滑块的进度条我创建了两个东西但是问题是进度条刚刚工作一次但是我想要新的幻灯片然后进度条必须重新启动。

这是我的代码：

<div class="testimonial">
        <div class="test">1</div>
        <div class="test">2</div>
        <div class="test">3</div>
        <div class="bar">
            <div class="progress"></div>
        </div>
    </div>

CSS
.testimonial {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}
.testimonial .test {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
.testimonial .bar{
 position: relative;
 width: 100%;
 border-radius: 4px;
 height: 10px;
 background: #e1e1e1;
 top:120px;

}
.testimonial .bar .progress{
 position: absolute;
 top: 0;
 left: 0;
 border-radius: 4px;
 height: 10px;
 width: 0;
 background: #000;  
}
here is jquery

$(document).ready(function(){
            // settings
            var $slider = $('.testimonial'); // class or id of carousel slider
            var $slide = 'div.test'; // could also use 'img' if you're not using a ul
            var $transition_time = 1000; // 1 second
            var $time_between_slides = 4000; // 4 seconds

            function classAnimate(){
                $( ".progress" ).animate({
                    width: "100%"
                }, 5500);

            }
            classAnimate();
            function slides(){
              return $slider.find($slide);
            }

            slides().fadeOut();

            // set active classes
            slides().first() .addClass('active') ;
            slides().first() .fadeIn($transition_time);

            // auto scroll 
            $interval = setInterval(
                    function () {
                        var $i = $slider.find($slide + '.active').index();

                        slides().eq($i).removeClass('active');
                        slides().eq($i).fadeOut($transition_time);

                        if (slides().length == $i + 1) $i = -1;

                        // loop to start


                        slides().eq($i + 1).fadeIn($transition_time);
                        slides().eq($i + 1).addClass('active');
                        classAnimate((slides().length));

                    }
                    , $transition_time + $time_between_slides
            );




        });

Answer 1

每次都应该重置jquery动画。

function classAnimate(){
            $( ".progress" )
            .clearQueue()
            .stop()
            .css(
                {width:'0%'}
            )
            .animate({
                width: "100%"
            }, 5500);

        }

http://jsfiddle.net/yp8L2t9h/

进度条动画与滑块幻灯片

1 个答案: