我有下一个问题：我想用计时器交叉淡化<body>标记的不同背景图像。您可以看到here我想要实现的示例。
问题是我对这些东西还很陌生，不知道该怎么做...我看过很多帖子，但它们只会使我更加困惑！
我的HTML代码：
<body id="one" onload="startTimer()">
<!-- Some other tags -->
</body>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
var url = "url(" + images[x] + ")";
$("#one").css('background-image', url);
}
function startTimer() {
setInterval(displayNextImage, 6000);
}
var images = [], x = -1;
images[0] = "someimage1.jpg";
images[1] = "someimage2.jpg";
images[2] = "someimage3.jpg";
</script>
和我的CSS代码：
body {
background-image: url("images/forest1.jpeg");
background-size: cover;
}
我愿意接受建议，如果有更好的方法可以做到，那就太好了！我只想得到与上面显示的网络相同的观点！
提前致谢！
最佳答案
您不需要任何JavaScript，可以使用CSS动画实现它：
body {
background-size: cover;
}
@-webkit-keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
@keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
.letterAnimation {
-webkit-animation: changeBckg 16s ease infinite;
animation: changeBckg 16s ease infinite;
}<body class="letterAnimation">
</body>