點擊更改背景圖片

我有一個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

點擊更改背景圖片

回答

相關問題