在圖像之間CSS實現淡入淡出的動畫幻燈片

理想我想bewteen幻燈片的transistions點擊時交叉衰減，而不是閃到白色和淡入有沒有人知道這樣做的方法？

到目前爲止，我已經嘗試過。

HTML

<div class="contentWrapper"> 
     <div id="sliderWrapper"> 
      <div id="slider" ondragstart="return false;"> 
       <img class="mySlides fade" src="../images/lupe1.jpg"> 
       <img class="mySlides fade" src="../images/lupe2.jpg"> 
       <img class="mySlides fade" src="../images/lupe3.jpg"> 
       <img class="mySlides fade" src="../images/lupe4.jpg"> 

       <div class="overlay-controls left-control" onclick="plusDivs(-1)"></div>     
       <div class="overlay-controls right-control" onclick="plusDivs(1)"></div> 

      </div>            
     </div> 
    </div> 

</div>

CSS

div.contentWrapper { 
    margin-left: 235px; 
    padding: 0px; 
    display: block; 
} 

#sliderWrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    right: 0 
} 

#slider { 
    width: auto; 
    height: calc(100vh - 120px); 
    display:block 
    vertical-align:middle; 
    text-align:center; 
    padding-top: 60px; 
} 

img.mySlides{ 
    max-width: 100%; 
    max-height: 100%; 
    height:auto; 
} 


.fade { 
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */ 
    -moz-animation: fadein 0.5s; /* Firefox < 16 */ 
    -ms-animation: fadein 0.5s; /* Internet Explorer */ 
    -o-animation: fadein 0.5s; /* Opera < 12.1 */ 
    animation: fadein 0.5s; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Opera < 12.1 */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function currentDiv(n) { 
    showDivs(slideIndex = n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 

    x[slideIndex-1].style.display = ""; 
}

來源

2016-11-16 Breageside

您需要**提供一些代碼**，而不只是指向外部網站的鏈接。 **你到目前爲止已經嘗試過什麼來實現你想要的？** ...在旁註中，* w3schools *通常是過時的，並不是一個很好的參考。 – Ricky

感謝您的回覆，我已經使用迄今已嘗試的代碼更新了我的問題。你有沒有其他的資源可以推薦，而不是w3schools？ – Breageside

有幾種可能的實現方式爲淡入淡出，然而一個簡單的方法來實現這一目標是使用過渡而不是改變元素的顯示。（這將導致整個單元的自動隱藏）就可以每張幻燈片的過渡屬性設置爲這樣：

img.mySlides{ 
    max-width: 100%; 
    max-height: 100%; 
    height:auto; 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 1; 
    transition: opacity .5s ease; 
}

然後切換不透明度改爲顯示屬性在JavaScript這樣的：

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.opacity = "0"; 
    } 

    x[slideIndex-1].style.opacity = "1"; 
}

*請注意，爲此，您需要將滑塊容器內的所有滑塊絕對放置，以便將其從流中取出並放置在同一位置。

希望它有幫助！

來源

2016-11-23 16:49:23 Fabio

在圖像之間CSS實現淡入淡出的動畫幻燈片

回答

相關問題