jquery - CSS 背景变化之间的延迟

Question

我试图通过在函数上调用 setTimeout 来旋转 CSS 背景，但是代码没有按预期工作。只有一个过渡，然后它会立即跳到最后一张图像。

JsFiddle

var func = function () { 

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/subtle_stripes.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/struckaxiom.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "urlhttp://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_stripes.png)"); 
    },2000);

    setTimeout(func, 0);

}
setTimeout(func, 0);

谢谢

Answer 1

您可以使用 setInterval 代替 setTimeout:

var i = 0;
var rotator = document.querySelector('#rotator');
var path = 'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/';

var backgrounds = [
'diamond_upholstery',
'subtle_stripes',
'struckaxiom',
'dark_stripes'
];

function func(i) {
setInterval(function(){
if (i === (backgrounds.length-1)) {i = 0;} else {i++;}
rotator.style.backgroundImage = 'url(' + path + backgrounds[i] + '.png)';}, 2000);
}

window.onload = func(i);

#rotator {
width: 160px;
height: 160px;
background-image:url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png');
}

<div id="rotator">
</div>