[英]Background crossfade transitions javascript and css
I am new to javascript .我是 javascript 新手。 I made a simple code that in javascript will randomly change my background every 5 seconds, however, it looks horrid.我做了一个简单的代码,在 javascript 中会每 5 秒随机改变我的背景,但是,它看起来很可怕。
Both of loading the picture and the transition is jumpy and doesn't look nice at all.加载图片和过渡都是跳跃的,根本不好看。 When I google this problem all the code looks super complicated, I am not allowed to use external links for help either(it's a school project).当我用谷歌搜索这个问题时,所有代码看起来都超级复杂,我也不允许使用外部链接寻求帮助(这是一个学校项目)。
What I want is to implement crossfading transitions into my code, and I have seen people do it using CSS but for that, you have to add every single picture and blah blah blah, I want it to be reusable, for me to write it once and then if I add more pictures I won't have to change anything, hope you guys understand and hope you can help!!!我想要的是在我的代码中实现淡入淡出过渡,我已经看到人们使用 CSS 来做到这一点,但是为此,您必须添加每张图片等等,我希望它可以重复使用,让我写一次然后如果我添加更多图片我将不必更改任何内容,希望你们理解并希望你们能帮助!!! :) :)
Code:代码:
function random_pic() {
// image array
var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];
// execute code every 5 seconds
window.setInterval(function() {
// create a random number between 0 and 4
var num = Math.floor(Math.random() * 4);
// set the background to one of the images in the array
document.body.style.backgroundImage = images[num];
},
5000);
}
random_pic();
I'm reading that you have two different issues that you are trying to solve.我读到您正在尝试解决两个不同的问题。 The biggest issue is the crossfading issue.最大的问题是交叉淡入淡出问题。 The other issue is the performance and loading of the images.另一个问题是图像的性能和加载。
As this is a school assignment I think it's not a good idea to share the exact code that will make this work, but I'll give you some pointers that you can use to get to the desired result.由于这是一项学校作业,我认为分享使这项工作发挥作用的确切代码不是一个好主意,但我会给您一些指示,您可以使用它们来获得所需的结果。
Hope this helps.希望这可以帮助。 Good luck.祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.