-1

我正在尝试创建全屏可更改背景图像。我花了很长时间完善它以在其他 PC 上工作。它在我的屏幕上完美运行，但在其他显示器上它会改变。

现在的问题是，如果浏览器没有最大化，图像就会到处都是。一旦最大化，它就可以正常工作。

背景图片每 5 秒变化一次，所以并不像设置背景图片那么简单。这是我的代码：

<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
    //change the image
    if(!imageID)
    {
        document.getElementById("myimage").src="Minecraft.jpg";
        imageID++;
    }
    else if(imageID==1)
    {
        document.getElementById("myimage").src="Minecraft1.jpg";
        imageID++;
    }
    else if(imageID==2)
    {
        document.getElementById("myimage").src="Minecraft2.jpg";
        imageID++;
    }
    else if(imageID==3)
    {
        document.getElementById("myimage").src="Minecraft4.jpg";
        imageID++;
    }
    else if(imageID==4)
    {
        document.getElementById("myimage").src="Minecraft5.jpg";
        imageID++;
    }
    else if(imageID==5)
    {
        document.getElementById("myimage").src="Minecraft6.jpg";
        imageID++;
    }
    else if(imageID==6)
    {
        document.getElementById("myimage").src="Minecraft7.jpg";
        imageID=0;
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>

<style>
#myimage {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

<body>
<body style='background:black; '
  onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img  id='myimage' src='Minecraft.jpg'/>
</div>
</body>

----------编辑-------------- 我使用了您的代码（希望是正确的），但现在图像根本没有加载。

<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
    //change the image
    if(!imageID)
    {
        document.getElementByTagName("body").className="pic1";
        imageID++;
    }
    else if(imageID==1)
    {
        document.getElementByTagName("body").className="pic2";
        imageID++;
    }
    else if(imageID==2)
    {
       document.getElementByTagName("body").className="pic3";
        imageID++;
    }
    else if(imageID==3)
    {
        document.getElementByTagName("body").className="pic4";
        imageID++;
    }
    else if(imageID==4)
    {
        document.getElementByTagName("body").className="pic5";
        imageID++;
    }
    else if(imageID==5)
    {
        document.getElementByTagName("body").className="pic6";
        imageID++;
    }
    else if(imageID==6)
    {
        document.getElementByTagName("body").className="pic7";
        imageID=0;
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>

<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>

<body style='background:black; '
  onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img  id='myimage' src='Minecrft.jpg'/>
</div>
</body>

我究竟做错了什么？

4

2 回答 2

1

为您的背景图像使用 100% x 100% 绝对定位的 div 可能是导致问题的原因。

切换到 <body> 上的 CSS 类

.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc

然后，您可以更改 <body> 的类，而不是更改图像标签的 src。这将允许您删除该 div 的绝对定位并“正常”布局站点。

于 2013-09-09T19:01:52.030 回答
0

你可以这样做：

var imageClass = 'pic';
if(imageID) {
    imageClass += imageID;
}
document.body.className = imageClass;
imageID++;

和 CSS：

.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}

等等

要调整背景大小，您可以选择最适合您网站的CSS 替代方案，例如：

body {
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover cover;
}

jsFiddle 的现场演示。

于 2013-09-10T04:16:18.383 回答