如何停止移动背景图像位置

Question

我有背景图片，通过使用小的JavaScript代码，它从右向左移动。

HTML代码

<div id="clouds_image"></div>

Javascript代码

var g=0;
var speed=30;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
scroller=setTimeout(function(){rollClouds()},speed);
}
window.addEventListener?
window.addEventListener('load',rollClouds,false):
window.attachEvent('onload',rollClouds);

但我注意到，随着时间的推移我的PC CPU内存使用量增加了！ 导致我的电脑过载，如果我禁用了javascript代码，它恢复正常。

我的问题

所以我认为我需要修改这个javascript代码，它不会永远保持工作，我的意思是，我想让它重复该动作只有5次然后停止，也许我需要定义g值，但我不是很好javascript所以任何帮助〜谢谢。

Answer 1

一个更干净的解决方案可能是使用jQuery来移动背景：

function moveClouds() {
    $("#clouds_image").css({left:"-2000px"});
    $("#clouds_image").animate({left:"2000px"},10000);
}

然后，您可以设置一个间隔，每隔x毫秒触发一次。

setInterval(moveClouds,10000)

JSFiddle在这里： http ： //jsfiddle.net/qXpVX/

Answer 2

您需要使用变量来计算执行该函数的次数，并使用setInterval而不是setTimeout：请参阅示例

http://jsfiddle.net/EQDjx/206/ （我的计数器从100开始，下降到0）

为了更好的效果，我重新使用jquery。 请参阅动画功能http://api.jquery.com/animate/

var g = 1000;
var speed=300;
var counter = 100;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
if (counter < 1) clearInterval(interval);
}
interval = setInterval(function(){rollClouds()}, speed)