我正在尝试在 Vanilla JS 中创建一个绝对简单的图像滑块。 让它工作，但不知道如何在图像变化时添加过渡。
任何人都可以给我一些建议，我有什么可能性？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="mainSection">
<div id="mainDiv">
<div id="previous" onclick="changeImageBackward()"><i id="arrow" class="fa fa-arrow-left fa-5x" aria-hidden="true"></i></div>
<div id="mainImage">
<img class="image" src="#" alt="">
</div>
<div id="next" onclick="changeImageForward()"><i id="arrow" class="fa fa-arrow-right fa-5x" aria-hidden="true"></i></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS：
#mainDiv {
background-color: rgb(81, 81, 81);
height: 40vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly
}
#previous {
background-color: grey;
height: 80%;
width: 20%;
border: solid 1px black;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#mainImage {
background-color: rgb(108, 108, 108);
height: 80%;
width: 50%;
border: solid 1px black;
border-radius: 10px;
overflow: hidden;
}
#next {
background-color: grey;
height: 80%;
width: 20%;
border: solid 1px black;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
}
#next:hover, #previous:hover {
box-shadow: inset 0 0 40px white;
}
JS：
let image = document.querySelector(".image");
const imageSource = ["bee-8978619_1280.jpg", "forest-8371211_1280.jpg", "mushroom-8313142_1280.jpg", "toadstool-8362901_1920.jpg"];
image.src = imageSource[0];
const next = document.querySelector("#next");
let i=0;
function changeImageForward () {
if (i < 3){
i++
image.src = imageSource[i]
} else {
i = 0
image.src = imageSource[i];
}
};
function changeImageBackward (){
if (i > 0) {
i--
image.src = imageSource[i]
} else {
i = 3
image.src = imageSource[i]
}
};
我真的不知道从哪里开始
在你的ccs中，你可以为图像设置淡入淡出效果，然后在js中，而不是立即交换图像，添加一个小的延迟以允许过渡效果：
function changeImageForward() {
image.classList.add('fade-out');
setTimeout(() => {
if (i < imageSource.length - 1) {
i++;
} else {
i = 0;
}
image.src = imageSource[i];
image.classList.remove('fade-out');
}, 500); // This matches your CSS transition time
}
function changeImageBackward() {
image.classList.add('fade-out');
setTimeout(() => {
if (i > 0) {
i--;
} else {
i = imageSource.length - 1;
}
image.src = imageSource[i];
image.classList.remove('fade-out');
}, 500);
}.image {
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
.fade-out {
opacity: 0;
}