Question

大家好抱歉这个问题，但过去一小时我一直在更改网址，“”（那些东西），以及（和那些）。

我正在尝试更改div的背景网址。我知道之前已经问过这个问题，但是那里没有关于使用带有图像链接的数组的答案。相反，这个人把链接放在函数的括号中，我认为这是非常讨厌的代码。

这就是我想要的：

HTML

thread

CSS

<div id="display"></div>
<a href="#" onClick="changeimg(0, event)"><img alt="img" src="img/option/img1"></a>
<a href="#" onClick="changeimg(1, event)"><img alt="img" src="img/option/img2"></a>

JS

#display{
    width: 750px;
    height: 500px;
    overflow: hidden;
    background:url(../img/img1.JPG);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

当我这样做时，我在控制台中收到一条ERR_FILE_NOT_FOUND消息。当我在网址中复制数组的一个链接时，如：

var display = document.getElementById('display');

var imgs = [
    'img/img1.JPG',
    'img/img2.JPG'
];

function changeimg(x, e) {
    var i = x;

    display.style.backgroundImage = "url(imgs[i])";
    e.preventDefault();
}

它将图像更改为链接的图像。那么如何使索引工作呢？

（请注意，我在'显示'和选项中使用单独的图像显示。我这样做，所以网站不必加载20个巨大的图像，但1）

感谢您的帮助！

Answer 1

尝试使用ES6模板文字。对于您的问题，请使用以下代码替换您的代码。

display.style.backgroundImage = URL（$ {IMGS [I]}）;

Answer 2

使用如下：

var display = document.getElementById('display');

var imgs = [
    'img/img1.JPG',
    'img/img2.JPG'
];

function changeimg(x, e) {
    var i = x;

    display.style.backgroundImage = "url('"+ imgs[i] + "')"
    e.preventDefault();
}

希望这有帮助！

使用数组的值更改div的背景URL

2 个答案: