[我正在使用一个库来比较不同的照片,例如“前后”,它们在一个照片上显示在另一个照片上,中间有一个按钮,您可以向左或向右拖动查看差异。
现在,我要执行的操作是实现两个按钮-一个在图片的左侧,另一个在右侧。当您单击这些按钮时,我希望照片根据前两张或后两张进行更改。
我为按钮做了一个if语句,但是它们没有正常工作,尽管我没有注意到任何明显的错误。
HTML代码
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="" id="originalImage" alt="Original Image">
<div class="cd-resize-img">
<img src="" id="modifiedImage" alt="Modified Image">
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
JavaScript代码
let originalImage = document.querySelector('#originalImage');
let modifiedImage = document.querySelector('#modifiedImage');
document.querySelector('#leftArrow').addEventListener("click", function(){
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/1.jpg";
originalImage.src = "img/2.jpg";
}
});
document.querySelector('#rightArrow').addEventListener('click', function(){
if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";
}
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/5.jpg";
originalImage.src = "img/6.jpg";
}
if ((modifiedImage.src = "img/5.jpg") && (originalImage.src = "img/6.jpg")){
modifiedImage.src = "img/7.jpg";
originalImage.src = "img/8.jpg";
}
});
现在,如果我打开页面,将显示照片1和2。如果我单击“右”按钮,它将显示图片7和8,从那里,如果我单击“左”按钮,它将再次显示图片1和2,尽管我在“左”按钮上有此条件。按钮甚至不包含您在图7和8的场景。
[请帮助,我真的不明白发生了什么
在if
语句中,条件应该是元素equal to|greater than|less than|ecc
,另一个元素。
在条件内的代码中,将第二个元素的值分配给第一个元素:
> if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg"))
您应该做的是检查它们是否是equal
即==
:
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg"))
[我认为您要达到的目的是,当您单击right
按钮时,您想显示下两个图像,而当您单击prev
按钮时,您要显示前两个图像。如果是这种情况,那么您可以检查我的解决方案。
这里是js
文件。
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
这是.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="./img/1.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
#wrapper {
display: flex;
}
.cd-image-container {
display: flex;
}
#leftArrow,
#rightArrow {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
在if语句中使用==或===
试一下
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";here