Question

我希望每5秒换一次转换（淡入淡出）。我怎么能意识到这一点？

Answer 1

您可以使用webkit-animation执行此操作。这只适用于webkit浏览器。有一些简单的javascript答案已经添加到评论中，但是现在用CSS做的事情更好，特别是如果它们可以优雅地降级。

.test {
    height: 30px;
    width: 30px;
    -webkit-animation-name: color2;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
  }
  @-webkit-keyframes color2 {
      0% {
      }
      25% {
        background: blue;
    }
}

Answer 2

您可以尝试使用以下代码并设置变量间隔的时间间隔

<强> JS

$(document).ready(function () {
var img_array = [1, 2, 3, 4, 5];
var index = 0;
var interval = 5000; //time intervalin milli second
setTimeout(function () {
    $('#fullPage').animate({
        backgroundColor: 'transparent'
    }, 1000);
    $('body').css('backgroundImage', 'url(http://1054.fleeceitout.com/sites/all/themes/jack/images/field.' + img_array[index++ % img_array.length] + '.jpg)');
    $('#fullPage').delay(3000).animate({
        backgroundColor: 'rgb(255,255,255)'
    }, 1000);
    setTimeout(arguments.callee, interval);
}, interval);

}）;

<强> CSS

body {
background-image: url(field.2.jpg);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
#fullPage {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgb(255, 255, 255);
}

如何通过转换更改div背景？

2 个答案: