如何为Vanilla JS实现的图片轮播添加切换过渡效果？

针对你现有的极简图片轮播，下面提供两种易实现的过渡效果方案，直接基于你的代码修改：

方案1：淡入淡出过渡（最简易） #

通过CSS的opacity过渡配合JS控制图片加载前后的透明度变化，实现平滑切换。

修改后的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;
    position: relative;
}

#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;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.image.fade-out {
    opacity: 0;
}

#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];
let i = 0;

function changeImageForward () {
    image.classList.add("fade-out");
    setTimeout(() => {
        i = (i + 1) % imageSource.length;
        image.src = imageSource[i];
        image.onload = () => {
            image.classList.remove("fade-out");
        };
    }, 500);
};

function changeImageBackward (){
    image.classList.add("fade-out");
    setTimeout(() => {
        i = (i - 1 + imageSource.length) % imageSource.length;
        image.src = imageSource[i];
        image.onload = () => {
            image.classList.remove("fade-out");
        };
    }, 500);
};

方案2：左右滑动过渡 #

这种效果需要将图片容器改为多图片横向排列，通过CSS的transform控制位置实现滑动，视觉效果更动感。

修改后的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">
                <div class="image-container">
                    <img class="image" src="bee-8978619_1280.jpg" alt="">
                    <img class="image" src="forest-8371211_1280.jpg" alt="">
                    <img class="image" src="mushroom-8313142_1280.jpg" alt="">
                    <img class="image" src="toadstool-8362901_1920.jpg" alt="">
                </div>
            </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;
    position: relative;
}

.image-container {
    display: flex;
    height: 100%;
    width: 400%;
    transition: transform 0.5s ease-in-out;
}

.image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

#next {
    background-color: grey;
    height: 80%;
    width: 20%;
    border: solid 1px black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#next:hover, #previous:hover {
    box-shadow: inset  0 0 40px white;
}

修改后的JS #

const imageContainer = document.querySelector(".image-container");
const imageSource = ["bee-8978619_1280.jpg", "forest-8371211_1280.jpg", "mushroom-8313142_1280.jpg", "toadstool-8362901_1920.jpg"];
let i = 0;

function changeImageForward () {
    i = (i + 1) % imageSource.length;
    const offset = -i * 100;
    imageContainer.style.transform = `translateX(${offset}%)`;
};

function changeImageBackward (){
    i = (i - 1 + imageSource.length) % imageSource.length;
    const offset = -i * 100;
    imageContainer.style.transform = `translateX(${offset}%)`;
};

注意事项 #

• 两种方案的过渡时长（0.5s）可根据需求调整
• 滑动方案中，若图片数量变化，需同步修改.image-container的width值（n张图设为n*100%）
• 淡入淡出方案建议预加载图片，避免切换时出现空白

内容的提问来源于stack exchange，提问作者Lemond