在特定時間段內通過切換類來更改身體的背景

我已經仔細考慮了範圍，但只能找出如何使用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的前幾天都沒有。謝謝。

來源

2014-11-09 user3390852

其實，你在哪裏的setInterval'共享代碼'（）使用..？ o.0 – 2014-11-09 07:44:24

您可以如下圖所示使用toggleClass方法通過返回的類名從回調選項開關：

$("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);

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

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

來源

2014-11-09 07:13:31

這很好，謝謝。 – user3390852 2014-11-09 17:37:19

試試這個：

$("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);

來源

2014-11-09 06:39:15 Abruzzi

如果要循環這個不斷，你可以使用這樣的事情：

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循環，以確保遞增的數字始終在一個範圍內。

來源

2014-11-09 06:48:12 jfriend00

沒有看到你的setInterval代碼很難說，但我想象的問題是你的setInterval'間隔'彼此踩着，因爲你基本上都是同時啓動它們。這很可能會起作用，但你不得不錯開他們的開始時間。

如果你希望它永遠繼續，你可以試試這個除了阿布魯齊的回答是：

$("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); 
}

來源

2014-11-09 06:56:25 HeadCode

在特定時間段內通過切換類來更改身體的背景

回答

相關問題