Jquery滑块完成后再次自动

Jquery slider auto again after finish

本文关键字：Jquery      更新时间：2023-10-17

我是Jquery的新手，需要帮助。我在网页上有Jquery图像滑块，可以旋转几个不同的图像，每个图像的计时器为3000，它们仍然重复。在滑块下面，我有一个简单的加载程序栏-基于其他颜色隐藏div，从左到右使用相同的计时器3000进行动画显示。易于理解的但问题是，这个动画只运行一次，图像会不断旋转。所以问题是，我如何使我的加载程序栏"重新加载"动画后，定时器结束？像这样-http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif

我的查询

function playslider(){
    var hidden = $('.colorSlide2');
    hidden.animate({"left":"0px"}, 3000).addClass('visible');   
}   
playslider();

我的CSS

.colorSlide2 {
    position:absolute;
    width:100%;
    z-index:2;
    left:-100%;
    height: 5px; 
    background: #f8e508;
}
.colorSlide1 {
    position: relative; 
    width: 100%; 
    height: 5px; 
    background: #254b8b;
}

尝试

$.fx.interval = -10;
function playslider(){
    var hidden = $(".colorSlide2")
    , reset = hidden.css("left");
    return hidden.animate({"left":"0%"}, 3000, "linear", function() {
     $(this).css("left", reset);
     return playslider()
    }).addClass("visible");   
}   
playslider();


$.fx.interval = -10;
function playslider(){
    var hidden = $(".colorSlide2")
    , reset = hidden.css("left");
    return hidden.animate({"left":"0%"}, 3000, "linear", function() {
     $(this).css("left", reset);
     return playslider()
    }).addClass("visible");   
}   
playslider();
.colorSlide2 {
    position:absolute;
    width:100%;
    z-index:2;
    left:-100%;
    height: 5px; 
    background: #f8e508;
}
.colorSlide1 {
    position: relative; 
    width: 100%; 
    height: 5px; 
    background: #254b8b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="colorSlide1">
    <div class="colorSlide2"></div>
</div>

相关文章：