用動畫改變div的背景圖像

Question

我想創建一個小滑塊來每秒更改我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更精確。

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秒更改一次圖像，背景將會非常快速地變化。

小提琴

Answer 2

我希望這可以幫到你

HTML

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

CSS

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

JS

 $(function () {
            var arrayOfPartenaires = [
            "http://fotos2013.cloud.noticias24.com/animales1.jpg",
            "http://www.schnauzi.com/wp-content/uploads/2013/03/animales-en-primavera.jpg",
            "https://johannagrandac.files.wordpress.com/2015/01/conejos.jpg",
             "http://png-4.findicons.com/files/icons/1035/human_o2/128/face_smile.png",
            "http://icons.iconarchive.com/icons/rokey/the-blacy/128/big-smile-icon.png",
            "http://simpleicon.com/wp-content/uploads/smile-256x256.png"
        ];
            var loaders = 0;
            function cycleImages() {
                var element = arrayOfPartenaires[loaders];
                $("#imags").css({ 'background-image': 'url(' + element + ')' }).animate({ opacity: 1 }).hide().fadeIn("slow");
                if (loaders < arrayOfPartenaires.length) {
                    loaders = loaders + 1;
                    if (loaders >= arrayOfPartenaires.length) {                        
                        loaders = 0;
                    } 
                }
                else {
                    loaders = 0;
                }
                console.log(loaders, arrayOfPartenaires[loaders]);
            }
            cycleImages();
            setInterval(function () { cycleImages() }, 3000);
        });

jsFiddel演示