javascript - 滑块移动时使文本消失

Question

如您所见，我用 HTML 和 CSS 制作了一个图像滑块。问题是我无法使第一个滑块图像上的文本消失。

HTML：

<div class="slider-frame">
    <div class="slider-images">
        <div class="image-container">
            <img src="./Images/Image1.jpg">
            <h2 class="first-img-main-text">Main Text</h2>
            <p class="first-img-text">Caption</p>
            <a class="first-img-btn">Button</a>
        </div>
    </div>
</div>

CSS：

.image-container img {
    width: 1681px;
    height: 750px;
    animation-name: slide_animation;
    animation-duration: 25s;
    animation-iteration-count: infinite;

@keyframes slide_animation {
    0% {transform: translateX(0);}
    11% {transform: translateX(0);}
    22% {transform: translateX(-100%);}
    33% {transform: translateX(-100%);}
    44% {transform: translateX(-200%);}
    55% {transform: translateX(-200%);}
    66% {transform: translateX(-100%);}
    77% {transform: translateX(-100%);}
    88% {transform: translateX(0);}
    100% {transform: translateX(0);}
}

老实说，我不知道如何使用 JavaScript。

JavaScript：

// Button
const firstImageBtn = document.querySelector('.first-img-btn');

// Text
const mainText = document.querySelector('.first-img-main-text');
const caption = document.querySelector('.first-image-text');

// Animations
const slideAnimation = document.getAnimations('slide_animation');


// Event Listeners

// Button Animations
firstImageBtn.addEventListener('mouseover', function(){
    firstImageBtn.style.background = '#000';
    firstImageBtn.style.transition = '0.6s';
});

firstImageBtn.addEventListener('mouseout', function(){
    firstImageBtn.style.background = 'none';
    firstImageBtn.style.transition = '0.4s';
});

// Text Animations
mainText.addEventListener('change', function(){
    if (slideAnimation.style.transform <= 'translateX(-20%)') {
        mainText.style.filter = 'opacity(0)';
    }
});

标签： javascripthtmlcss