Question

我已经仔细确定了互联网，但只能找到如何使用javascript解决这个问题，但我只是在这段代码中使用jQuery。

我正在做的是每600毫秒添加一个类来更改html文件正文的背景图像，但是我需要这个继续下去。

$("body").addClass("mountain-1");
    setTimeout(function(){
        $("body").addClass("mountain-2");   
    }, 1200);
    setTimeout(function(){
        $("body").addClass("mountain-3");   
    }, 2400);
    setTimeout(function(){
        $("body").addClass("mountain-4");   
    },3600);

我不明白为什么setInterval()不适用于此代码，但在几天之前我根本就没有使用过jQuery。感谢。

Answer 1

试试这个：

$("body").addClass("mountain-1");
setTimeout(function(){
    $("body").removeClass().addClass("mountain-2");   
}, 1200);
setTimeout(function(){
    $("body").removeClass().addClass("mountain-3");   
}, 2400);
setTimeout(function(){
    $("body").removeClass().addClass("mountain-4");   
},3600);

Answer 2

如果你想连续循环，你可以使用这样的东西：

function rotateClassNames(selector, base, num, t) {
    var i = 0;
    var lastClass = "nothing";

    setInterval(function() {
        var index = (i++ % num) + 1;
        var nextClass = base + index;
        $(selector).removeClass(lastClass).addClass(nextClass);
        lastClass = nextClass;
    }, t);
}

rotateClassNames(document.body, "mountain-", 4, 600);

这使用一个setInterval()函数来旋转类名，删除以前的类名并添加一个新名称。通过使用常用技巧i % 4来循环使用类名末尾的数字，以确保递增的数字始终在一个范围内。

Answer 3

没有看到你的setInterval代码，很难说，但我想问题是你的setInterval'interval'是相互踩踏的，因为你基本上是同时启动它们。这可能会奏效，但你必须错开他们的开始时间。

如果你希望它永远存在，你可以试试Abruzzi的回答：

$("body").addClass("mountain-1");
setTimeout(back1, 1200);

function back1(){
    $("body").removeClass().addClass("mountain-2");
    setTimeout(back2, 1200);
}
function back2(){
    $("body").removeClass().addClass("mountain-3");
    setTimeout(back3, 1200);
}
function back3(){
    $("body").removeClass().addClass("mountain-4");
    setTimeout(back1, 1200);
}

Answer 4

您可以通过返回类名来使用toggleClass方法来切换回调选项，如下所示：

＆＃13;

$("body").addClass("foo mountain-1 bar");

setInterval(function() {
  $("body").toggleClass(function(index, className) {
    var s = className.split("mountain-")[1],
      n = s.slice(0, 1);
    return "mountain-" + n + " mountain-" + (n > 3 ? 1 : ++n);
  });
}, 600);

＆＃13;

.mountain-1 {
  background: dodgerblue;
}
.mountain-2 {
  background: hotpink;
}
.mountain-3 {
  background: royalblue;
}
.mountain-4 {
  background: limegreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

通过在特定间隔期间切换类来更改正文的背景

4 个答案: