Question

我在该网站上制作了一个webite，每3秒钟就会有3张图片在3圈内发生变化。

代码：

var swap;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(7000, 3);

和下半场（我不认为问题在那里。）

$(window).scroll(function(){
    //... your logic goes here...
    $("body").css("background-image", "background-image: url(1.jpg)");
    if(youWantToStopTheInterval){
        window.clearInterval(swap);
        $("body").css("background-image", "background-image: url(1.jpg)");
    }
});

CSS：

#b1 {
    /* Location of the image */
    background-image: url(1.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}
#b2 {
    /* Location of the image */
    background-image: url(2.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}
#b3 {
    /* Location of the image */
    background-image: url(3.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}

现在，如果我们刷新或加载页面，背景中会出现灰色（我无法看到），这是7秒钟......（比，这一切都完美）为什么？ /如何解决？

Answer 1

所以你应该在设置间隔之前执行该功能来设置初始图像，这就是你看到空白7秒的原因。

此外，您永远不会看到所有图像，因为您增加了var swap; function run(interval, frames) { var int = 1; function func() { document.body.id = "b" + int; int++; if(int > frames) { int = 1; } } func(); var swap = window.setInterval(func, interval); } run(7000, 3);变量，然后在使用该值之前检查是否重置它。你应该改变你的if检查。

小提琴：http://jsfiddle.net/AtheistP3ace/5f566hrc/

var swap;
function run(interval, frames) {
    var int = 1;
    var previousClass = "";

    function func() {
        if (previousClass != "") {
            document.body.classList.remove(previousClass);
        }
        previousClass = "b" + int;
        document.body.classList.add(previousClass);
        int++;
        if(int > frames) { int = 1; }
    }
    func();
    var swap = window.setInterval(func, interval);
}

run(7000, 3);

除此之外，为了解决这个问题而改变一个元素的ID似乎对我很不满意。这不是完美的，可能有更好的方法来做到这一点，但使用类仍然比一遍又一遍地更改元素ID更好。

小提琴：http://jsfiddle.net/AtheistP3ace/5f566hrc/1/

.b1 {
    ...
}
.b2 {
    ...
}
.b3 {
    ...
}

CSS：

var lambdaFunction = (name1: string) => {return name1};
console.log(lambdaFunction("Jack"));

灰色屏幕，在更改背景图像时显示7秒钟

1 个答案: