通过javascript单击更改背景图像阵列

问题描述

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

我想在用户单击div时更改div的背景图像。但是，不仅仅是一系列图片，而是一系列图片。这样，每次点击都会出现一张新图片。 （1.jpg，2.jpg，…，5.jpg）必须通过替换CSS背景图片网址来完成，否则其他功能将不再起作用。到目前为止，我每次点击只能交换一张图片。

这是当前代码：

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

谢谢您的帮助！

解决方法

您可以这样操作，例如有5张图片，将images设为5：

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

---

如果您有非数字图像列表，则可以像这样手动为其创建数组：

// 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]})` });
  });
});

,

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

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