Question

var main = function() {

    for (var i = 1; i <= 4; i++)
    {
        var time1 = 5000;
        var time2 = 5500;

        var location = "url('homepage/" + i + ".jpg')";

        setTimeout(function() {
            $('.jumbotron').fadeTo("slow", 0, function() { });      
        }, time1);

        setTimeout(function() {
            $('.jumbotron').css("background-image", location);
        }, time2);

        setTimeout(function() {
            $('.jumbotron').fadeTo("slow", 1, function() { });
        }, time2);

        time1 += 5000;
        time2 += 5000;
    }
};

$(document).ready(main);

我正在尝试动画更改页面上的背景。我有一个包含4张图片的文件夹，我想让它随机播放。问题是，使用此代码，淡入的下一个图像是最后一个，在这种情况下也是第四个，然后它停止更改。我当然做错了。

Answer 1

您应该使用setTimeouts来代替循环和多个setInterval，因为for循环几乎可以立即执行，您只能看到最后一次迭代的结果。

var index = 0;
var images = ["image1.jpg", "image2.jpg", ...]

var timeout = setInterval(function() {

   index++;

   if (index >= images.length) {
       clearTimeout(timeout);
       return;
   }

   // Code for showing image here...

}, 5000);

Answer 2

这是我使用jQuery和CSS制作漂亮的背景过渡动画的解决方案，您可以使用setInterval设置多少次更改或将其作为无限循环运行。 CSS中的背景是第一个显示的背景，也可作为后备。

DEMO：COOL jsFiddle

CODE - jQuery：

$(function(){

    var limit = 0; // 0 = infinite.
    var interval = 2;// Secs
    var images = [
        "http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-1.jpg"
       ,"https://www.tipsandtricks-hq.com/images/amazing-photos/group1/tips_background_image4.jpg"
       ,"http://www.kriesi.at/themes/corona/files/2011/09/kode.jpg"
       ,"http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-2.jpg"
    ];

    var inde = 0; 
    var limitCount = 0;
    var myInterval = setInterval(function() {
           if (limit && limitCount >= limit-1) clearTimeout(myInterval);
           if (inde >= images.length) inde = 0;
           $('html').css({ "background-image":"url(" + images[inde]+ ")" });
           inde++;
           limitCount++;
        }, interval*1000);
});

代码 - CSS：

html {     
    /* FallBack */ background: url(http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-2.jpg); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
    -webkit-transition:background 0.5s ease-in;
     -moz-transition:background 0.5s ease-in;
      -o-transition:background 0.5s ease-in;
       -ms-transition:background 0.5s ease-in;
        transition:background 0.5s ease-in;
}

多次更改背景图像

2 个答案: