c# - javascript 切换背景图像

Question

我有以下 JS 将 BG 颜色从红色切换到绿色等等。

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);
        };

语法有问题吗？

Answer 1

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 使其看起来像动画（淡入淡出）：

#testDiv{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}

Answer 2

对我来说，您的代码似乎创建了一个背景图像

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);
};