使用javascript转换背景图像_Javascript_Html_Css

使用javascript转换背景图像

javascript html css

使用javascript转换背景图像,javascript,html,css,Javascript,Html,Css,我试图修改在youtube上找到的一些代码，但遇到了一些麻烦。我可以很好地切换图像，但我似乎无法调整代码以通过背景图像进行转换这是我的密码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled</title> <link type="text/css" rel="stylesheet" href="slideshow.css"/&g

我试图修改在youtube上找到的一些代码，但遇到了一些麻烦。我可以很好地切换图像，但我似乎无法调整代码以通过背景图像进行转换

这是我的密码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link type="text/css" rel="stylesheet" href="slideshow.css"/>
</head>
<body>
    <script src="slideshow.js"></script>
</body>            
</html>

及

我在这里是一个完全的新手，所以如果我遗漏了一些明显的东西，请给我指出正确的方向来阅读。谢谢。

代替

document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);

做

您所需要做的就是将主体样式的backgroundImage属性设置为适当的url。。。语法。将changeImage函数替换为以下函数：

function changeImage () {
    document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
    imageIndex++;
    if (imageIndex>=imageArray.length) {
        imageIndex=0;
        }
    }

您使用myImage.setAttribute所做的工作不起作用，因为myImage不是DOM元素，也没有setAttribute方法。

Perfect。这是有道理的，也是有效的。我不能再要求更多了。既然它奏效了，有没有办法让这个改变更平稳地过渡？

document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);

document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";

function changeImage () {
    document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
    imageIndex++;
    if (imageIndex>=imageArray.length) {
        imageIndex=0;
        }
    }