在图像之间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实现淡入淡出的动画幻灯片

回答

相关问题