jQuery滑块循环？

嘿，我有一个滑块，徽标从右侧滑动到左侧。现在我希望它从右到左重新开始（不会从左到右！）。jQuery滑块循环？

我该怎么做？我超级新的jQuery

这里是我的代码：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>animate demo</title> 
<style> 
#background { 
width:980px; 
height:75px; 
background-color:#abc; 
} 
#logo1 { 
position:absolute; 
width:234px; 
height:40px; 
margin:17px 0px 0px 700px; 
background-image:url(bru.png); 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<div id="background"> 
<div id="logo1" class="right"></div> 
<script> 
$(".right").ready(function() { 
$("#logo1").animate({"left":"-=600px"},10000); 
}); 
</script> 
</div> 
</body> 
</html>

来源

2013-12-13 user3099441

您需要继续附加新元素，以便它不会返回。 – Sergio

<script> 
    $(".right").ready(function() { 
     /* animation F definition*/ 
     var animate = function(cb){ 
      $("#logo1").animate({"left":"-=600px"}/*properties end values*/, 
            1000 /* duration */, 
            function()/* on complete F*/{ 
             this.style.left = 0; /* reset style properties */ 
              if(cb&&cb.call){ 
               cb(animate); /* call animation again */ 
              } 
            }) 
     }; 
     /* First call */ 
     animate(animate); 
    }); 
</script>

只需定义您的动画函数并在回调动画完成时调用它。这将循环它。

来源

2013-12-13 13:15:46 uarpalex

谢谢，这将是伟大的，只是它变得越来越快！我怎样才能改变速度？ – user3099441

发现如何改变时间谢谢:) – user3099441

好，祝你好运你正在建设:-) –

这只是它一个快速刺，但是一个这样的效果？

http://jsfiddle.net/wrxsti85/CzyCr/

使用与具有隐藏溢出父的相对位置：

var loop = function(){ 
    $("#logo1").animate({"left":"-=1300px"},10000, function(){ 
     $('#logo1').css({'left':'1000px'}); 
     loop(); 
    }); 
}; 

loop();

希望这有助于！

来源

2013-12-13 13:12:34 wrxsti

如果你希望它出现一次，把这个第一动画后

JAVASCRIPT：如果你想让它不断循环出现一次

$(".right").ready(function() { 
    $("#logo1").animate({"left":"-=600px"}, 10000); 
    $("#logo1").animate({"left":"+=600px"}, 10000); 
});

...

JAVASCRIPT：REPEAT

$(".right").ready(function() { 
    var left = function() { 
     $("#logo1").animate({"left":"-=600px"}, 10000); 
     right(); 
    } 
    var right = function() { 
     $("#logo1").animate({"left":"+=600px"}, 10000); 
     left(); 
    } 
    left(); 
});

来源

2013-12-13 13:14:51

jQuery滑块循环？

回答

相关问题