单击 javascript 更改背景图像数组

Question

我是 javascript 的初学者，遇到以下问题。

我想在用户单击时更改 div 的背景图像。但不是只有一张图片，而是通过一系列图片。这样每次点击都会出现一张新图片。 (1.jpg, 2.jpg, …, 5.jpg)必须通过替换css背景图url来完成，否则其他功能将无法使用。到目前为止我每次点击只能交换一张图片。

这是当前代码：

HTML:

<div class = "image"></div>

CSS:

.image{
   position: absolute;
   background-image: url ("1.jpg");
   background-size: cover;
}

JS:

$ (document) .ready (function () {
           $ (". image"). on ("click", function () {
               $ (". image"). css ({'background-image': 'url (2.jpg)'});
           });
   });

感谢您的帮助！

Answer 1

可以这样，比如有5张图片，使images5:

// possible image count
const images = 5;

$(document).ready(function () {
  let current = 0;
  $(".image").on("click", function () {
    $(".image").css({ 'background-image': `url(${++current % images + 1}.jpg)` });
  });
});

如果您有一个 non-numerical 图片列表，您可以像这样手动为其创建一个数组：

// put all possible image urls in this list
const images = ['1.jpg', '2.jpg', '3.jpg', 'cat.jpg', 'dog.jpg'];

$(document).ready(function () {
  let current = 0;
  $(".image").on("click", function () {
    $(".image").css({ 'background-image': `url(${images[++current % images.length]})` });
  });
});

Answer 2

不确定我是否正确理解了你的问题，你想要这样的东西吗？

let index = 1;
$ (document).ready (function () {
  $ (".image").on("click", function () {
    $ (".image").css({'background-image': 'url (' + index + '.jpg)'});
    index++;
  });
});

单击 javascript 更改背景图像数组

Change background image array by javascript click

javascript

arrays

function

click

background-image