Fatal编程技术网
  • javascript/
  • Javascript 非最大化浏览器会弄乱背景图像

Javascript 非最大化浏览器会弄乱背景图像

javascript css

Javascript 非最大化浏览器会弄乱背景图像,javascript,css,background-image,Javascript,Css,Background Image,我正在尝试创建一个全屏可变背景图像。我花了很长时间来完善它，以便在其他PC上工作。它在我的屏幕上工作得很好，但在其他显示器上它会改变 现在的问题是，如果浏览器没有最大化，图像就会到处都是。 一旦最大化，它就可以正常工作 背景图像每5秒更改一次，因此它不像设置背景图像那么简单。这是我的密码： <head> <script type='text/javascript'> var imageID=0; function changeimage(every_seconds) {

我正在尝试创建一个全屏可变背景图像。我花了很长时间来完善它，以便在其他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>


var-imageID=0；
功能更改图像（每_秒）
{
//更改图像
如果（！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；
}
//再次调用相同的函数，持续x秒
设置超时（“更改图像（“+每秒钟+”），（（每秒钟）*3000））；
}
#我的形象{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
}
----------编辑-------------- 我使用了你的代码（希望是正确的），但现在根本没有加载图像

<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>


var-imageID=0；
功能更改图像（每_秒）
{
//更改图像
如果（！imageID）
{
document.getElementByTagName（“主体”）.className=“pic1”；
imageID++；
}
else if（imageID==1）
{
document.getElementByTagName（“主体”）.className=“pic2”；
imageID++；
}
else if（imageID==2）
{
document.getElementByTagName（“主体”）.className=“pic3”；
imageID++；
}
else if（imageID==3）
{
document.getElementByTagName（“主体”）.className=“pic4”；
imageID++；
}
else if（imageID==4）
{
document.getElementByTagName（“主体”）.className=“pic5”；
imageID++；
}
else if（imageID==5）
{
document.getElementByTagName（“主体”）.className=“pic6”；
imageID++；
}
else if（imageID==6）
{
document.getElementByTagName（“主体”）.className=“pic7”；
imageID=0；
}
//再次调用相同的函数，持续x秒
设置超时（“更改图像（“+每秒钟+”），（（每秒钟）*3000））；
}
.pic1{背景图像：'Minecraft.jpg'；}
.pic2{背景图像：'Minecraft1.jpg'；}
.pic3{背景图像：'Minecraft2.jpg'；}
.pic4{背景图像：'Minecraft5.jpg'；}
.pic5{背景图像：'Minecraft6.jpg'；}
.pic6{背景图像：'Minecraft7.jpg'；}
我做错了什么？

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

切换到

.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc
然后，您将更改的类，而不是更改图像标记的src。这将允许您删除该div的绝对位置并“正常”布局站点。

您可以执行以下操作：

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

要调整背景大小，您可以选择最适合您站点的，例如：

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

你的风格很好地说明，图像必须覆盖整个屏幕。根据你的意愿调整你的风格。那一点帮助都没有：P我只需要浏览器停止弄乱尺寸/位置。我需要更多的细节来回答这个问题。。请上传问题的屏幕截图，并在此处添加适用的CSS和HTML代码。您可以通过访问来查看您自己，将浏览器从最大大小上取下，将滚动条弄乱并重新调整大小。不相关，但为什么不文档。getElementById（“myimage”）.src=“Minecraft”+imageID+”.jpg；我怎么能用这样的台词来概括呢？document.getElementById（“myimage”）.src=“Minecraft.jpg”；document.getElementByTagName（“主体”）.className=“NewClassNameGoesere”；我编辑了我原来的帖子。顺便谢谢你的帮助。希望你能帮我一劳永逸地完成这件事！