点击更改背景图片

我有一个ID为“art”的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>

来源

2012-12-04 45808

很好地使这个更容易诊断 - http://jsfiddle.net/。你有没有在你改变的div上设置高度？ – urbananimal

您可以使用条件为

<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-04 13:25:12 Dineshkani

或img = img％4 + 1; – 2012-12-04 13:33:28

如果使用HTML5，你可以使用自定义属性（参见this answer）。这比使用全局变量要好，这样你可以管理多个元素的背景。

<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/

（结果是通过警报可见的（）调用，你只需要将其删除）。

来源

2015-04-02 20:43:12 Amessihel

点击更改背景图片

回答

相关问题