與肯恩燒傷效果幻燈片的顏色疊加

Question

我有一個肯恩燒傷效果幻燈片運行多張圖片。我想在幻燈片的移動網站上添加疊加層，其中顏色會自動在綠色的黃色和藍色之間切換。覆蓋沒有出現，我不知道這個問題。任何幫助表示讚賞。

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的風格。

您恰當地想要的是在滑塊頂部添加一個單獨的疊加層。爲此，我強烈建議使用僞元素。

我也建議使用media-queries而不是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; 
    } 
} 

它幾乎完成同樣的事情。當屏幕寬度低於480像素時，僞元素被添加到#slideshow，這實際上是覆蓋。