如何在Jquery中使用setInterval（）来防止图像闪烁？

Question

jQuery的：

var count = 3;

setInterval(function() {
    if (count == 12) {
        count = 3;
    }

    count++;
    $('.desktop').css({'background-image': 'url(images/index_main_bg'+count+'.jpg)'});
}, 3000);

CSS：

.desktop {
    background: url(images/index_main_bg4.jpg) center no-repeat;
    background-size: cover;
    z-index: 9;
    transition: background 1.1s linear;
}

基本上，我只是希望这些背景图像具有平滑过渡，但它在看似随机的时间有一个延迟的闪烁。任何帮助表示赞赏！

谢谢

Answer 1

使用包含所有图像的大图像，然后更改背景位置（精灵图像）

var count = 1,varx_pos = 0;
setInterval(function(){
 varx_pos += 180;
 if(count == 3){varx_pos = 0;count=0;}
  $('.desktop').css({'background-position-x':varx_pos+'px'});
 count++;
},150);

.desktop{
background-image:url('http://spritely.net/images/bird_180x180.png');
width:180px;
height:120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desktop"></div>

Answer 2

创建多个“.desktop”元素并为所有人分配不同的背景。您可以只显示和隐藏（或任何需求的动画）特定的.desktop元素。你不会看到这个解决方案闪烁。

Answer 3

这就是我最终做的事情：

jQuery的：

var count=3;

setInterval(function() {
    if(count==11){
        $('#desktop').removeClass('desktop'+(count+1));
        count=3;
        $('#desktop').addClass('desktop'+(count+1));
    } else {
        count++;
        $('#desktop').removeClass('desktop'+count);
        $('#desktop').addClass('desktop'+(count+1));
    }
}, 3000);

CSS（我创建了多个添加和删除的类）：

.desktop4 {
  background-image: url(images/index_main_bg4.jpg);
}

.desktop5 {
  background-image: url(images/index_main_bg5.jpg);
}

.desktop6 {
  background-image: url(images/index_main_bg6.jpg);
}

HTML：

<div id="desktop" class="desktop4">
   SOME CONTENT
<div>

这避免了闪烁而不是像以前那样改变特定类的风格。