0

我有一个 ID 为“艺术”的 div。这个 div 应该有背景“S1_img1.jpg”。在 div 下方有一个按钮，当我单击它时，背景图像必须更改为“S1_img2.jpg”。

当我再次单击它时，它必须更改为“S1_img3.jpg”，然后继续。但是，img4 是最后一个。这意味着当 div 背景当前设置为 img4 并且我再次单击该按钮时，它必须变回 img1。

我试图通过使用 javascript 来实现这一点，但我无法让它工作。

1）当我使用下面的代码时，即使我确定图像路径正确，图像也不会显示为背景。

<script type="text/javascript">
document.getElementById("art").style.backgroundImage = "url(content/art/S1/S1_img1.jpg)";</script>

2）我怎样才能让它在我点击按钮时改变背景，就像我描述的那样？

此时按钮的 onClick 执行 javascript 函数“count();”。

<script type="text/javascript">
var img = 1;

function count() {
    img = img + 1;
    document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";
}
</script>
4

2 回答 2

0

您可以为此使用条件

<script type="text/javascript">
var img = 1;

function count() {
img = img + 1;
document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img"+img+".jpg)";
if (img==4) img=0;
}
</script>
于 2012-12-04T13:25:12.363 回答
0

如果您使用 HTML5，则可以使用自定义属性（请参阅此答案）。它比使用全局变量更好，这样你可以管理多个元素的背景。

<div style="background-image:url(content/art/S1/S1_img1.jpg);cursor:pointer"
     onclick="toggleBackgroundImage(this)">a</div>

<script type="text/javascript">
function toggleBackgroundImage(element) {
    var idbgrank = parseInt(element.getAttribute("data-idbgrank"));
    idbgrank = idbgrank ? idbgrank + 1 : 2;
    element.setAttribute("data-idbgrank", idbgrank)
    if (idbgrank > 4) return;
    element.style.backgroundImage = "url(content/art/S1/S1_img" + idbgrank + ".jpg)";
    alert(element.style.backgroundImage); //remove it ;)
}
</script>

见小提琴：http: //jsfiddle.net/g40hL0jc/3/

（结果通过 alert() 调用可见，您只需将其删除）。

于 2015-04-02T20:43:12.247 回答