javascript - 每 15 秒更改一次背景图像

Question

你好，
我有一个页面，其背景是我在 css 文件中设置的。我想每 15 秒更改一次。
我有 2 张图片:1.jpg 和 2。 jpg.我的 CSS 看起来像这样

.slide1 {
    max-width: 100%;
    background-attachment: fixed;
    width:100%;
    height: 100%;
    padding-top: 3em;
    position: relative;
    background-color: #FFFFFF;
    background-image: url('billede/1.jpg');
    background-size: auto 70%;
    color:#FFFFFF;
    background-repeat:no-repeat;
    background-position:bottom center;
    margin: 0;
}

这就是背景发生变化的原因:

<script>
    var arrayOfImages = new Array("billede/green/1.jpg","billede/green/2.jpg");

    $(arrayOfImages).each(function () {
    $('<img />').attr('src',this).appendTo('body').hide;
    });

    setInterval(function(){$(".slide3").css("background-image", "url('billede/green/" + parseInt((Math.random()*2)+1) + ".jpg')");},10000);
</script>

但是现在当它改变图片时，当我开始滚动背景显示时它会显示白色背景。我可以做些什么来更改背景而不显示白色背景？

Answer 1

您可以使用简单的 HTML 和 CSS 来做到这一点。

创建一个 HTML Div，每个 div 设置一个类的图像背景 CSS

<div class="x a"></div>
<div class="x b"></div>
<div class="x c"></div>

将大小设置为 100%，将 z-index 设置为您喜欢的位置CSS:

.x {
  background-image:url(image file);
  display: inline-block;
  animation: fade 1s forwards;
  -webkit-animation: fade 1s forwards;
  -moz-animation: fade 1s forwards;
  -o-animation: fade 1s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}


.b 
{
  background-image:url(image file);
    animation: fade 2s forwards;
  -webkit-animation: fade 2s forwards;
  -moz-animation: fade 2s forwards;
  -o-animation: fade 2s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}
.c 
{
  background-image:url(image file);
    animation: fade 3s forwards;
  -webkit-animation: fade 3s forwards;
  -moz-animation: fade 3s forwards;
  -o-animation: fade 3s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}


@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-webkit-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-moz-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-o-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}