我用HTML、CSS和JS为我的页面创建了一个幻灯片。
代码如下：

• index.html

<div class="slideshow">
                <div class="image__container">
                    <img src="/static/images/indoor2.jpg" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src="/static/images/indoor3.jpg" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src="/static/images/indoor4.jpg" alt="Indoor">        
                </div>
            </div>

字符串

• style.css

.slideshow {
    position: relative;
    animation: fadeInFromLeft 1.5s ease;
}

.image__container img {
    height: 80vh;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

型

• script.js

let slideIndex = 0;
showSlides();

function showSlides() {
    const slides = document.getElementsByClassName('image__container');

    // Hide all images
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }

    // Show curr image
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    slides[slideIndex - 1].style.display = 'block';

    // Repeat after 2 sec (2000ms)
    setTimeout(showSlides, 3000);
}

型
幻灯片效果很好，但我想添加一些过渡，例如淡入。
我试着这样做：

• style.css

.slideshow {
    position: relative;
    animation: fadeInFromLeft 1.5s ease;
}

.image__container img {
    animation: fadeInSlideshow 1s ease-in-out;
    height: 80vh;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInSlideshow {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

型
但是，即使它起作用，图像之间的过渡也不完全是最好的。
在动画和过渡领域还不是很实用，我想知道是否有人可以给予我一些关于如何进行的建议，以便了解如何在未来处理这个“问题”。
我很感激任何能帮助我的回应。
先谢谢你。