设置 backgroundPosition 和 setInterval答案

【问题标题】：set backgroundPosition and setInterval设置 backgroundPosition 和 setInterval
【发布时间】：2016-03-08 10:37:44
【问题描述】：

所以我做了一个代码

function slide()
{
    var x=1;
    while (x<=512) 
    {
        document.getElementById("slide").style.backgroundPosition = x+"px 0px";
        x++;
    }
}

JSFIDDLE

我想从backgroundPosition - 0 转换到backgroundPosition 512。上面的代码立即从 0 变为 512，我想让它像 1, 2, 3...
我尝试将x++ 更改为setTimeout(function(){x++), 100)，但它没有做任何事情。

【问题讨论】：

虽然您确实可以在 JavaScript 中使用 setInterval 做到这一点，但您是否可以选择使用 CSS 动画的答案？
真的，不要用 JavaScript 做这个。使用 CSS 动画。看看这个以获得灵感stackoverflow.com/questions/16989585/…

标签： javascript html

【解决方案1】：

使用 setTimeout() 并调用函数：

function slide(x) 
{
    if(x==undefined) var x = 1;
    if(x >= 512) return;
    document.getElementById("slide").style.backgroundPosition = x+"px 0px";
    x++;
    setTimeout(function() {
        // recall function and add other code if you want.
        slide(x);
    }, 100);
}
slide();

【讨论】：

Really 次要的 nitpick - 它应该是 if (x > 512) 以匹配 OP 的意图，或者更好的是，在调用 setTimeout 之前执行 if (x<=512)，这样你就可以保存最后调用一次函数。