1

所以我试图使用我的图像作为背景，我希望它们处于一个循环中，因此它在三个之间变化，下面是我的代码循环似乎正在工作，但我有两个我似乎无法解决的问题：

  • 计时器在幻灯片开始之前启动（屏幕黑屏 7 秒，然后显示第一张图像，我假设计时器位于代码的错误部分，但我将它移动了几次，它做同样的事情。如何我可以让它用第一张图片加载网站吗？

  • 图像显示得非常小，并没有像我想要的那样（自动）填充屏幕 我尝试了几个应该自动计算屏幕尺寸并相应填充的代码，但它们似乎不起作用......有什么建议吗？

<head>
    <meta http-equiv="Kess Agency" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="created by kess" content="en-us">
    <style>
    body{
        background-attachment: fixed;
        background-repeat:no-repeat;
        background-position: 300 200;

    }
    </style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//auto resize



    var imgs=new Array()
    imgs[0]="images/img1.png";
    imgs[1]="images/img2.png";
    imgs[2]="images/img3.png";
    //time between slides
    var speed=7000
    //preload images
    var processed=new Array()
    for(i=0;i<imgs.length;i++){
        processed[i]=new Image();
        processed[i].src=imgs[i];
    }
    var inc=-1;
    function slideimg(){
        if (inc<imgs.length-1)
            inc++;
        else
            inc=0;
        document.body.background=processed[inc].src;
    }
    if (document.all || document.getElementById)
    window.onload=new Function('setInterval("slideimg()",speed)');

</script>

</head>
 <body>
     <p class= "type"></p>
</body>
</html>​
4

1 回答 1

1

我认为您的问题是您正在等待页面加载然后运行 ​​setInterval。据我所知， setInterval 将等到间隔完成然后运行。你可以做到的一种方法是..

function slideimg(){
    if (inc<imgs.length-1)
        inc++;
    else
        inc=0;
    document.body.background=processed[inc].src;
    setTimeout(function(){
        slideimg();
    }, speed);
}

window.onload = function () {
    slideimg();
};

这样脚本将运行 onload 并且一旦加载它将等待然后再次运行。以这种方式而不是使用 setInterval 做事的另一个好处是，通过这种方式，进程将在再次运行之前完成（setInterval 将尝试每隔“任何”秒运行脚本，无论事情是否已加载。

对于背景大小，您可以尝试将 css 设置为background-size: cover;虽然这是新的（CSS3）。

于 2012-12-15T02:36:22.770 回答