Javascript 通过修改css旋转图像

我想通过修改css来旋转两个图像，如下所示：

document.getElementById("id").style.backgroundImage = "url('image2.png')";
document.getElementById("id").style.backgroundImage = "url('image1.png')";

但是，我只需要在函数调用时执行四次

我尝试过使用setTimeout（）方法，但是，它似乎不起作用

这是我的当前代码，正在通过单击进行初始化

var d = new Date();
var n;
var i;

function flash() {
    n = d.getTime();
    var newTime = d.getTime();
    var called = 0;
    i = 0;
    while ((newTime - n) < 2000) {
        document.getElementById("i_count").innerHTML = i;
        if (!(i % 2) && (!called)) {
            called = 1;
            setTimeout("change_1()", 250);
            i++;
            called = 0;
        } else if ((i % 2) && (!called)) {
            called = 1;
            setTimeout("change_2()", 250);
            i++;
            called = 0;
        }
        newTime = d.getTime();
    }
}

function change_1() {
    document.getElementById("id").style.backgroundImage = "url('image2.png')";
    return;
}
function change_2() {   
    document.getElementById("id").style.backgroundImage = "url('image1.png')";
    return;
}

var d=新日期（）；
var n；
var i；
函数flash（）{
n=d.getTime（）；
var newTime=d.getTime（）；
var=0；
i=0；
而（（newTime-n）<2000）{
document.getElementById（“i_count”）.innerHTML=i；
如果（！（i%2）和（！调用））{
调用=1；
setTimeout（“change_1（）”，250）；
i++；
调用=0；
}如果（（i%2）&&（！调用））{
调用=1；
setTimeout（“change_2（）”，250）；
i++；
调用=0；
}
newTime=d.getTime（）；
}
}
函数更改_1（）{
document.getElementById（“id”）.style.backgroundImage=“url（'image2.png'）”；
返回；
}
函数更改_2（）{
document.getElementById（“id”）.style.backgroundImage=“url（'image1.png'）”；
返回；
}

我试图使用计时器而不是在while循环中计数，但它会阻塞页面，并且从不加载。当我在while循环中使用计数器时，它在没有调用change_2（）的情况下递增，这意味着计数器只是在超过停止条件时递增

我想做一个非常（至少听起来像）简单的任务，点击动作，在一定时间内旋转图像并停止

。。。我试着搜索网，但在过去的两个小时里，我所看到的只是连续的旋转

谢谢你的帮助

将代码更改为以下内容，但是，我只得到一个周期。无论更改_1和2是否完成，计数器都会递增

var i;

function flash() {
    i = 0;
    while (i++ < 10) {
        document.getElementById("i_count").innerHTML = i;
        setTimeout("change_1()", 250);
    }
};

function change_1() {
    document.getElementById("1").style.backgroundImage = "url('images/img_1.png')";
    setTimeout("change_2()", 250);
};

function change_2() {
    document.getElementById("1").style.backgroundImage = "url('images/img_2.png')";
};

vari；
函数flash（）{
i=0；
而（i++<10）{
document.getElementById（“i_count”）.innerHTML=i；
setTimeout（“change_1（）”，250）；
}
};
函数更改_1（）{
document.getElementById（“1”）.style.backgroundImage=“url（'images/img_1.png'）”；
setTimeout（“change_2（）”，250）；
};
功能改变_2（）{
document.getElementById（“1”）.style.backgroundImage=“url（'images/img_2.png'）”；
};

是的，你还没接近

---

您不会在循环中一次又一次地调用超时。change_1应该设置一个超时来调用change_2，反之亦然，计数器在四点后停止。

主函数中仍然有一个无用的循环，而您没有从change_2调用change_1。什么意思我没有调用循环？在主函数

flash（）

中，您有一个

for

循环。我不知道你认为它在做什么，但它什么也没做。摆脱它。查看功能

change_2

。它应该有一行“setTimeout”（“change_1（）”，250）；`。我如何决定何时停止该操作？我不知道您将如何决定，但您可以通过让change_2增加一个全局计数器并在计数达到某个限制时停止调用setTimeout来强制执行您的决定。