gpt4 book ai didi

javascript - 幻灯片放映中的图像在显示之前会出现延迟

转载 作者:行者123 更新时间:2023-11-28 02:32:47 25 4
gpt4 key购买 nike

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

  • 计时器在幻灯片播放之前启动(屏幕黑屏 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)。

关于javascript - 幻灯片放映中的图像在显示之前会出现延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13888751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com