使用數組切換背景圖像

Question

即時通訊嘗試使用數組和時間間隔更改bacground-image屬性，這在代碼中是我迄今爲止。

$(document).ready(function(){ 
var bgArray =[ 
    "IMG/Trusti/phones/01.png", 
    "IMG/Trusti/phones/02.png", 
    "IMG/Trusti/phones/03.png", 
    "IMG/Trusti/phones/04.png", 
    "IMG/Trusti/phones/05.png", 
    "IMG/Trusti/phones/06.png" 
]; 
var i = 0; 
    setInterval(function(){ 
     $("#telefoondiv").animate({'background-image' : 'bgArray[i]'}); 
     i++; 
    }100); 
}); 

希望有人能幫助我。

Answer 1

使用css函數設置樣式而不是動畫。

$(document).ready(function(){ 
 
    var bgArray =[ 
 
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHN0Fxrd_RQqqwpnngUjjkah_tap84fzu6ltuH1lAZs3yGT2QH", 
 
     "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUgm_VIAjymgGEkYLhQVSQajHCr4qGAC2yqnzu7YbKAefn-iYJ-w", 
 
     "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" 
 
    ]; 
 
    var i = 0; 
 
     setInterval(function(){ 
 
      $("#telefoondiv").css({'background-image' : "url(" + bgArray[i] + ")"}); 
 
      i++; 
 
      
 
      if(i == bgArray.length){ 
 
       i = 0; 
 
      } 
 
     }, 1000); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="telefoondiv" style="height: 200px;"></div>