背景图像通过点击改变

Question

I am trying to change my 4 background images on mouseclick .我正在尝试在mouseclick上更改我的 4 个背景图像。

At the moment the same image appears 4 times on the screen (1 in each corner).目前，同一图像在屏幕上出现 4 次（每个角落 1 次）。 I would like to have only one image appearing on the whole screen and others replacing it when I click on the current image;当我单击当前图像时，我希望只有一个图像出现在整个屏幕上，而其他图像则替换它； and so on and so forth as you click again.当您再次单击时，依此类推。 I am unsure what is wrong with my code at the moment.我不确定我的代码目前有什么问题。

HTML: HTML：

<!DOCTYPE html>
<html lang="fr" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title> CODE </title>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="js/sketch.js"></script>

</head>

<body>

<div id="body" class="imageOne"></div>

</body>

</html>

JS: JS：

var bodyObj,
  className,
  index;

bodyObj = document.getElementById('body');
index = 1;
className = [
  'imageOne',
  'imageTwo'
];

function updateIndex() {
  if (index === 0) {
    index = 1;
  } else {
    index = 0;
  }
}

bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  updateIndex();
}

CSS: CSS：

html, body, #body {
    height: 100%;
    width: 100%;
}

#body.imageOne {
    background-image: url("img1.png");
}

#body.imageTwo {
    background-image: url("img2.png");
}

#body.imageTwo {
    background-image: url("img3.png");
}

#body.imageTwo {
    background-image: url("img4.png");
}

Answer 1

Rather than using classes for each image, it would be good to store them in an array and then change it programmatically.与其为每个图像使用类，不如将它们存储在一个数组中，然后以编程方式更改它。 Please find the snippet below.请在下面找到片段。

 let imgList = [ 'https://dummyimage.com/200x200/000/fff&text=image+1', 'https://dummyimage.com/200x200/000/fff&text=image+2', 'https://dummyimage.com/200x200/000/fff&text=image+3', 'https://dummyimage.com/200x200/000/fff&text=image+4' ]; let currentIndex = 0; function changeImg() { $('#body').css('backgroundImage', `url(${imgList[currentIndex]})`); currentIndex++; if (currentIndex == imgList.length) currentIndex = 0; } changeImg(); $('#body').on('click', changeImg);

 #body { width: 200px; height: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="body" class="imageOne"></div>

Answer 2

Here is another way (using classes as you did):这是另一种方式（像您一样使用类）：

 var bodyObj = document.getElementById('body'), index = 0, className = [ 'imageOne', 'imageTwo', 'imageThree', 'imageFour' ]; bodyObj.onclick = function(e) { index = (index + 1) % className.length; e.currentTarget.className = className[index]; }

 html,body,#body { margin: 0; height: 100%; width: 100%; } #body { background-position: center; background-size: cover; } #body.imageOne { background-image: url("https://picsum.photos/id/9/536/354"); } #body.imageTwo { background-image: url("https://picsum.photos/id/3/536/354"); } #body.imageThree { background-image: url("https://picsum.photos/id/1/536/354"); } #body.imageFour { background-image: url("https://picsum.photos/id/2/536/354"); }

 <div id="body" class="imageOne"></div>

Answer 3

I tried this one which works pretty well!我试过这个效果很好！

var index = 0;
var className = ['imageOne',
'imageTwo',
'imageThree',
'imageFour',
'imageFive'];

$(document).ready(function() {
$("#main").on("click", function() {
index = (index + 1) % className.length;
$(this).attr('class', className[index]);
});
});

背景图像通过点击改变

问题描述

3 个解决方案

解决方案1
1 2019-10-22 22:31:05

解决方案2
1 2019-10-22 22:33:43

解决方案3
0 2019-10-23 20:53:45

背景图像通过点击改变

问题描述

3 个解决方案

解决方案1 1 2019-10-22 22:31:05

解决方案2 1 2019-10-22 22:33:43

解决方案3 0 2019-10-23 20:53:45

解决方案1
1 2019-10-22 22:31:05

解决方案2
1 2019-10-22 22:33:43

解决方案3
0 2019-10-23 20:53:45