Question

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

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

Answer 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）。

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

1 个答案: