如何解决通过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++;
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。