画像とCSSでクロスフェードアニメーションを実装するスライド私はチュートリアルを使用してスライドショーを作ってきた

Question

はhere

理想的には私がクリックしたときにクロスフェードするのではなく、白に点滅し、フェードインするスライド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; } 
} 

JS

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 = ""; 
} 

Answer 1

クロスフェードのためのいくつかの可能な実装はしかし、これを達成する簡単な方法は、トランジションを使用しての代わりに変更され、あります要素の表示

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"; 
} 

*これが機能するには、スライダコンテナ内のすべてのスライドを絶対に配置して、それらをフローから取り出して同じ場所に配置する必要があります。

希望すると助かります！