javascript - 用动画更改 div 的背景图像

Question

我想创建一个小 slider 来每秒更改我的 div 的背景图像。

我的代码暂时不起作用，图像没有改变。理想情况下，我希望脚本以无限模式运行..

HTML

<div id="slidesPartenairesHome"></div>

CSS

#slidesPartenairesHome {
    background-size: contain;
    background-position: center center;
    width: 300px;
    height: 170px;
    margin-left: 120px;
}

JS

   $( document ).ready(function() {

        var arrayOfPartenaires = [
            "images/partenaires/a.png",
            "images/partenaires/b.jpg",
            "images/partenaires/c.jpg",
            "images/partenaires/d.png",
            "images/partenaires/e.png",
            "images/partenaires/f.jpg",
            "images/partenaires/g.jpg",
            "images/partenaires/h.jpg",
            "images/partenaires/i.png",
            "images/partenaires/j.jpg",
            "images/partenaires/k.jpg",
            "images/partenaires/l.jpg"
        ];


        for (var i=0; i<arrayOfPartenaires.length; i++) {

            var currentPartenaireImg = arrayOfPartenaires[i];

            $('#slidesPartenairesHome').animate({opacity: 0}, 'slow', function() {
                $(this).css({'background-image': 'url("'+currentPartenaireImg+')'}).animate({opacity: 1});
            });

        }

    });

Answer 1

你可以使用 window.setinterval，你也可以使用 setTimeout 但 setinterval is a litle bit more precise.

setinteval 示例:

window.setInterval(function(){
    var url = getCurrent();
    //start animation
    $('#slidesPartenairesHome').delay( 500 ).fadeTo(500, 0.3, function()
    {
        $(this).css('background-image', 'url(' + url + ')');
    }).fadeTo('slow', 1);
}, 1000);

// We start with index of 1 because we want to skip the first image, 
// Else we would be replacing it with the same image.
var index = 1;
     var arrayOfPartenaires = [
            "http://yourdomain.com/images/partenaires/a.png",
            "http://yourdomain.com/images/partenaires/b.png",
            "http://yourdomain.com/images/partenaires/c.png"
        ];

function getCurrent(){
    // We check if the index is higher than the ammount in the array.
    // If thats true set 0 (beginning of array)
    if (index > arrayOfPartenaires.length -1){
        index = 0;
    }
    var returnValue = index;
    index ++;
    return arrayOfPartenaires[returnValue];       
}

请注意，如果您真的想每 1 秒更改一次图像，背景将变化得非常快。

Fiddle