javascript - 带有 ken burns 效果幻灯片的颜色叠加

Question

我有一个包含多张图片的 ken burns 效果幻灯片。我想在幻灯片的移动站点上添加一个叠加层，其中的颜色会自动在绿色、红色、黄色和蓝色之间切换。叠加层没有出现，我无法找出问题所在。感谢您的帮助。

HTML:

 <div id="slideshow">
     <img src="images/Campus2.jpg" alt="school pic">
     <img src="images/bio_lab_optimised.jpg" alt="bio lab pic">
     <img src="images/Capture.jpg" alt="school pic">
     <img src="images/class_optimised.jpg" alt="class pic">
     <img src="images/LFPS_optimised.jpg" alt="school pic">
     <img src="images/phy_lab_optimmised.jpg" alt="physics lab">
     <img src="images/cs_lab.jpg" alt="class pic">
     <img src="images/x-optimised.jpg" alt="school pic">
     <img src="images/page-1-hero-image.jpg" alt="school's image">
     <img src="images/kindergarten2.jpg" alt="kindergarten">


</div>

CSS:(用于覆盖)

.overlay {
    position: relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:3;
    animation: color-animation 80s linear alternate;
}

@keyframes color-animation {
    0% {
        background-color: rgba(255,0,0,0.5);
    }

    25% {
        background-color: rgba(0,255,0,0.5);
    }

    50% {
        background-color: rgba(0,0,255,0.5);
    }

    100% {
        background-color: rgba(255,255,0,0.5);
    }
}

CSS:(ken burns 效果)

#slideshow{
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

#slideshow img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    /* to make pic responsive */
    min-height: 100%;
    min-width: 1024px;
    width: 100vw;
    height: 100vh;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 45s;
    -moz-transition-property: opacity, -moz-transform;
    -moz-transition-duration: 3s, 45s;
    -ms-transition-property: opacity, -ms-transform;
    -ms-transition-duration: 3s, 45s;
    -o-transition-property: opacity, -o-transform;
    -o-transition-duration: 3s, 4s;
    transition-property: opacity, transform;
    transition-duration:3s, 45s;
}

#slideshow img {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}

#slideshow img:nth-child(2n+1) {
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

#slideshow img:nth-child(3n+1) {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
#slideshow img:nth-child(4n+1) {
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
 * The rule below moves all images past the second one down the stack.
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

Javascript:

 function slideEffect(){
            //apply fx class to first element
            document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
            //loop kenburns effect every 15 seconds
            window.setInterval(kenBurns, 15000);
            //gets all images under slideshow
            var images = document.getElementById('slideshow').getElementsByTagName('img'),
                    numberOfImages  = images.length,
                    i= 1;

            function kenBurns() {
                //applies class fx appropriately
                if(i==numberOfImages){ i = 0;}
                images[i].className = "fx";
                if(i===0){ images[numberOfImages-2].className = "";}
                if(i===1){ images[numberOfImages-1].className = "";}
                if(i>1){ images[i-2].className = "";}
                i++;
            }
        };

if (window.innerWidth < 480)
{
     $('#slideshow').addClass('.overlay');
}
slideEffect();

Answer 1

你基本上只是改变了#slideshow的样式。

您真正想要的是在 slider 顶部添加一个单独的叠加层。为此，我强烈建议使用伪元素。

我还建议使用媒体查询而不是您的 JavaScript 解决方案。好一点。

如果你想保持你的方式，改变 .overlay 到这个:

.overlay:before {
    display: block;
    content: '';
    position: relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:3;
    animation: color-animation 80s linear alternate;
}

..或者如果你想改用媒体查询，删除这个:

if (window.innerWidth < 480)
{
     $('#slideshow').addClass('.overlay');
}

..并将其添加到 CSS 中:

@media screen and (max-width : 480px) {
    #slideshow:before {
        display: block;
        content: '';
        position: relative;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:3;
        animation: color-animation 80s linear alternate;
    }
}

它几乎做完全相同的事情。当屏幕宽度低于480px时，在#slideshow中添加一个伪元素，其实就是overlay。