这几天我开始学习 HTML / CSS / JS。 现在我开始了我的第一个小项目,一个用 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;
}