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)

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

2 个答案: