Question

每当我点击身体时，背景图像应该改变并在图像结束时重复。我试过这个但是不起作用：

HTML

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

JS

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，它完美无缺，但图像没有发生。如果你能帮助我，我很乐意！

Answer 1

background-image需要这样的网址：

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

Answer 2

你应该使用这个

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

Answer 3

在某些时候，您将使用可用的背景图片数量增加计数器，以便......（同样正确使用url() background-image:"url(image.jpg)"）喜欢：

＆＃13;

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] +")" });
});

＆＃13;

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

＆＃13;

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

＆＃13;

i++ % n将递增并循环回计数器

多次更改背景图像JS

3 个答案: