使用Javascript和Jquery從樣式表中更改背景圖像

Question

我想創建一個javascript + jquery函數來更改css文件中的背景圖像。

如果我嘗試更改background-color的值，則可以使用，但不能使用background-image 。

function randomWallpaper()
{
     var wallpapersList = ["1.jpg","9.jpg","3.jpg", "82.jpg"];
     var newWallpaper = Math.floor(Math.random()*5)+0;
     console.log(newWallpaper); //outputs the index
     changeBackground(wallpapersList, newWallpaper);
 }

function changeBackground(wallpapersList, newWallpaper) 
{
     $("body").css("background-image", wallpapersList[newWallpaper]);
}

setInterval(function()
{
     randomWallpaper();
},2500)

的CSS

body 
{
    background-image: url('41.jpeg');
}

誰能幫助我了解我的錯誤之處以及為什么這段代碼不起作用？ 我正在嘗試學習js

Answer 1

您還需要輸入url() 。

$("body").css("background-image", "url(" + wallpapersList[newWallpaper] + ")" )

（或使用ES6字符串插值語法：）

$("body").css("background-image", `url( ${wallpapersList[newWallpaper]} )` )

Answer 2

正如其他人指出的那樣，它是url()位。 有待改進：

function randomWallpaper()
{
    // In JS we mostly talk about arrays rather than lists
    const wallpapersArray = ["1.jpg","9.jpg","3.jpg", "82.jpg"];
    // Instead of hard-coding 5, use the length of the array (+1)
    const newIndex = Math.floor(Math.random() * (wallpapersArray.length+1));
    // Don't pass the whole array, just pass the URL we need
    changeBackground(wallpapersArray[newIndex]);
 }

function changeBackground(newWallpaperUrl) 
{
    $("body").css("background-image", "url('"+newWallpaperUrl+"')");
}

setInterval(function()
{
    // You forgot an l here
    randomWallpaper();
}, 2500);