我正在尝试更改mouseclick
上的4张背景图像。
此刻,同一张图像在屏幕上出现4次(每个角1个)。 我只希望在整个屏幕上显示一个图像,而当我单击当前图像时,其他图像替换它;再次单击时,依此类推。 我不确定目前我的代码有什么问题。
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:
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:
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");
}
答案 0 :(得分:1)
与其将类用于每个图像,不如将它们存储在一个数组中,然后以编程方式对其进行更改,这将是一个很好的选择。请在下面找到代码段。
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>
答案 1 :(得分:1)
这是另一种方式(像以前一样使用类):
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>
答案 2 :(得分:0)
我尝试了这个效果很好的东西!
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]);
});
});