使用数组切换背景图像

时间:2016-11-24 09:30:50

标签: arraylist background-image setinterval

我试图使用数组和时间间隔更改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);
});
希望有人可以帮助我。

1 个答案:

答案 0 :(得分:0)

使用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>