旋轉木馬中的第一張圖片的淡入淡出轉換中的錯誤

Question

我使用jQuery淡入轉場的4張圖片的輪播。旋轉木馬的第一張圖片在先前的動畫結束後不會平滑淡入。

這裏是一個鏈接到網頁： https://rimildeyjsr.github.io/St.Anthony-Website/

如何解決這個問題？

HTML：

<div class="slideshow"> 
    <img src="images/page-1-hero-image.jpg" alt="school's image" class="img-responsive page-one-pic mySlides"> 
    <img src="images/Capture2.jpg" alt="school pic" class="img-responsive mySlides"> 
    <img src="images/Capture.jpg" alt="school pic" class="img-responsive mySlides"> 
    <img src="images/Capture3.jpg" alt="school pic" class="img-responsive mySlides"> 
</div> 

的Javascript：

var imgs = $(".slideshow > img"); 

function carousel() { 
    imgs.hide(); 
    imgs.each(function(index,element){ 
     // Don't make the first one (index = 0) wait at all; 
     // make the second (index = 1) wait 3 seconds, the third 
     // (index = 2) wait 6 seconds, etc. And then fade in 
     $(element).delay(index * 3000).fadeIn(1000); 
    }); 
    // Start the entire process again two seconds after the last image fades in 
    setTimeout(carousel,imgs.length*3000); 
} 

鏈接到github上庫：https://github.com/rimildeyjsr/St.Anthony-Website

Answer 1

默認情況下，所有的圖像是可見的，並互相重疊。當一張幻燈片在舊的幻燈片中消失時是可見的，而新的幻燈片則在其上面。所以，你看到一個平穩的過渡。

當您重新啓動過渡時，您將隱藏所有圖像並淡入第一個圖像。當時沒有舊的圖像，所以身體的背景（白色）可見，並且過渡看起來不太好。

解決方案：您需要管理圖像的z-index。所以，當最後一幅圖像結束時，你需要保持它可見。將第一張圖像的z-index更改爲最後一張圖像。然後淡入第一個。 （請確保你沒有隱藏最後一張圖片。