多次更改背景图像JS

Change Background Image Multiple Times JS

本文关键字：图像 JS 背景      更新时间：2023-09-26

每次我点击身体时，背景图像都会发生变化，并在图像结束时重复。我试过了，但不起作用：

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);
});

我认为该代码应该有效，但它不起作用。我试过背景色，效果很好，但图像效果不佳。如果你能帮我，我会很高兴的！

在某个时刻，您将增加可用背景图像数量的计数器，因此…（也可以像background-image:"url(image.jpg)"一样正确使用url()）
喜欢：

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将递增并循环回您的计数器

您应该使用这个

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

背景图像需要这样的url：

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