C# javascript切换背景图像

我有下面的一段JS，它将背景颜色从红色切换到绿色等等

function blink() {
            var currentColor = 'red';
            setInterval(function () {
                document.body.style.backgroundColor = currentColor;
                currentColor = currentColor === 'red' ? 'green' : 'red';
            }, 1000);
        };

是否有办法将颜色更改为图像，以便在两个图像之间切换，而不是在两个颜色之间切换

我尝试过以下方法，但没有成功：

function toggleBG() {
            var currentColor = "Images/tableBGRed.gif";
            setInterval(function () {
                var myDiv = document.getElementById("testDiv");
                myDiv.style.backgroundImage = "url('" + currentColor + "')";
                currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')";
            }, 1000);
        };

语法有问题吗

currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')"; 

将导致字符串变成类似于

“url（url（'Images/cat.gif'））”

，这不是

myDiv.style.backgroundImage

的有效值

因为您已经获得了myDiv.style.backgroundImage=“url（““+currentColor+”）”在前一行中

更新：

可以使用CSS3使其看起来像动画（淡入淡出）：

---

在我看来，你的代码创建了一个背景图像

url('url('Images/xxx.gif')')

试一试

---

您是否将div的高度和宽度设置为没有内容时，div将被折叠，并且除非它有内容或设置了高度和宽度，否则将不可见。这也可能会有所帮助：您可以尝试的另一件事是去掉？：语法并使用实际的if/else。我自己从来都不相信这种语法。是的，div有内容，通过上面的toggleBG（）函数，BG变为红色，只是保持红色，从来没有真正变为“url（'Images/tableBG.gif'）。看起来是的，就是这样。非常感谢。有没有办法使“动画”更平滑？像淡入淡出一样？@sd_dracula我建议您使用jQuery或CSS3。有关CSS3转换的信息，请参阅

url('url('Images/xxx.gif')')

function toggleBG() {
    var currentColor = "url('Images/tableBGRed.gif')";
    setInterval(function () {
        var myDiv = document.getElementById("testDiv");
        myDiv.style.backgroundImage = currentColor;
        currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')";
    }, 1000);
};