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 is a litle bit more precise.

setinteval示例：

self

请注意，如果您真的想每1秒钟更换一次图片，背景会变化非常快。

Fiddle

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 Demo

用动画改变div的背景图像

2 个答案: