图像在幻灯片放映中延迟显示之前

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

计时器在幻灯片之前启动（屏幕为黑色 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>

我认为

您的问题是您要等待页面加载然后运行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();
};

这样，脚本将在加载时运行，加载后它将等待然后再次运行。以这种方式而不是使用 setInterval 做事的另一个好处是，这样进程将在再次运行之前完成（setInterval 只会尝试在您选择的每"任何"秒运行脚本，无论内容是否已加载。

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

相关内容

最新更新

热门标签：