多次更改背景圖像JS

每次我點擊身體時，背景圖像都應該改變，並在圖像結束時重複。我試過，但不起作用：多次更改背景圖像JS

HTML

<body id="change-image"> 
</body>

var images = ['../img/1.jpg', '../img/2.jpg', '../img/3.jpg', '../img/4.jpg'], 
    i = 0; 

$("#change-image").click(function(){ 
    $("body").css("background-image", images[i]); 
    i = (i==images.length-1) ? 0 : (i+1); 
});

我認爲，代碼應工作，但事實並非如此。我嘗試用backgroudColor，它完美地工作，但與圖像不會發生。如果你能幫助我，我會很高興！

來源

2015-02-09 Sergio Cardenas

只是注意：如果你的'$（「身體」）'是* *已經點擊的元素'＃轉換image'比改爲使用'$（this）'（在你的函數內）。 – 2015-02-09 06:50:23

背景圖像需要的URL是這樣的：

$("#change-image").click(function(){ 
     $("body").css("background-image", "url("+ images[i]+")"); 
     i = (i==images.length-1) ? 0 : (i+1); 
    });

來源

2015-02-09 06:37:39 roshan

我想你有一個錯字：''url +（「'應該是'」url（「'。 – 2015-02-09 06:41:03

你應該使用這個

$("body").css("background-image", "url:('" + images[i] + "')");

來源

2015-02-09 06:38:41

在某些時候，你會增加計數器出的背景圖像，所以可用數量。 ..（還可以通過使用適當url()像background-image:"url(image.jpg)"）
不喜歡：

var images = [ 
 
    'http://placehold.it/500x320/07f', 
 
    'http://placehold.it/500x320/f70', 
 
    'http://placehold.it/500x320/7f0', 
 
    'http://placehold.it/500x320/0f7' 
 
], 
 
    i = 0, 
 
    n = images.length; 
 

 
$("#change-image").click(function(){ 
 
    $("body").css({backgroundImage: "url("+ images[i++ % n] +")" }); 
 
});

html, body{height:100%;} 
 
body{ 
 
background: red none 50%/cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="change-image">CHANGE</button>

的i++ % n將遞增和環回你的櫃檯

來源

2015-02-09 06:48:18

多次更改背景圖像JS

回答

相關問題