[英]Jquery function to change background image every 5 seconds not working
我在 jquery 中有以下功能:
window.onload = function() {
$(function () {
var images = ["banner.png", "banner2.png"];
var i = 0;
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#banner").fadeOut("slow", function () {
$(this).css("background", "url(../media/img/" + images[i] + ") no-repeat");
$(this).fadeIn("slow");
});
}, 5000);
});
}
我希望它每 5 秒更改一次背景,但是它更改為空背景,這是 CSS 代碼:
#banner{
position: absolute;
top: 32px;
width: 100%;
background: url(../media/img/banner.png) no-repeat;
height: 628px;
只是為了記錄,我的文件中有一個 banner2.png,我不明白出了什么問題
相對 CSS 路徑可能很棘手(這讓我絆倒的次數比我願意承認的要多)
在 CSS 文件中,路徑是相對於該 CSS 文件的
通過javascript設置時,相對於頁面的HTML文件
所以,如果你的文件夾布局是這樣的
root
|- css
| |- style.css
|
|- media
| | - banner.jpg
| | - banner1.jpg
|
|- index.html
然后 CSS 會將 banner.jpg 引用為../media/banner.jpg
但是當在 index.html 中從 javascript 設置背景時......路徑是./media/banner.jpg
甚至media/banner.jpg
所以
$(this).css("background", "url(./media/img/" + images[i] + ") no-repeat");
或者
$(this).css("background", "url(media/img/" + images[i] + ") no-repeat");
或者(我認為更容易閱讀 - 但在 Internet Explorer 中不可用)使用模板字符串(即在反引號中``) - 另外,只需更改background-image
因為原始 CSS 中no-repeat
$(this).css("background-image", `url(media/img/${images[i]})`);
您甚至可以使用"
似乎不是必需的,但在記錄background-image
任何地方都顯示
$(this).css("background-image", `url("media/img/${images[i]}")`);
雖然,我認為這不太可讀(❁´◡`❁)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.