使用javascript在幻灯片上淡出

Question

作为标题状态，我想添加一个淡出动画，一旦我的幻灯片中的图像仅使用html，css和javascript进行交换。我不确定如何做到这一点，但我有一些想法。我想我可以在当前图像上添加一个id，例如#fadeout，以便在淡出时获得特定的特征。

var myIndex = 0; 
 
window.onload = slidePictures(); 
 

 
function slidePictures() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 

 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    slides[i].setAttribute("id", "fadeout"); 
 

 
    } 
 
    myIndex++; 
 
    if (myIndex > slides.length) { 
 
    myIndex = 1 
 
    } 
 
    slides[myIndex - 1].style.display = "block"; 
 
    document.getElementById("indicator").innerHTML = myIndex + "/" + slides.length; 
 

 
    setTimeout(slidePictures, 3000); 
 

 
}

.slidesDiv>img { 
 
    width: 80%; 
 
    height: 80%; 
 
    margin-left: 10%; 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 

 
#fadeOut { 
 
    opacity: 0; 
 
}

<div class="slidesDiv"> 
 
    <img class="mySlides" src="//placehold.it/200x80/0fb"> 
 
    <img class="mySlides" src="//placehold.it/200x80/0bf"> 
 
    <img class="mySlides" src="//placehold.it/200x80/fb0"> 
 
    <img class="mySlides" src="//placehold.it/200x80/0fb"> 
 
    <h1 id="indicator"> Indicator </h1> 
 
</div>

Answer 1

1. 你不应该你display财产与transition，因为它不是animatable。
2. 我建议在初始化时使用position: absolute和隐藏元素。
3. 我认为最好将淡入/淡出效果结合起来。

试试这个例子：

var indexes = {current: 0}; 
 
var slides = document.getElementsByClassName('mySlides'); 
 
window.onload = slidePictures(); 
 

 
function slidePictures() { 
 
    if (indexes.last) { 
 
    \t slides[indexes.last].classList.remove('visible'); 
 
    } 
 

 
    slides[indexes.current].classList.add('visible'); 
 

 
    document.getElementById('indicator').innerHTML = (indexes.current + 1) + '/' + slides.length; 
 
    
 
    indexes.last = indexes.current; 
 
    indexes.current++; 
 
    if (indexes.current >= slides.length) { 
 
     indexes.current = 0; 
 
    } 
 

 
    setTimeout(slidePictures, 3000); 
 
}

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.slidesDiv { 
 
    width: 80%; 
 
    height: 80%; 
 
    margin-left: 10%; 
 
    position: relative; 
 
} 
 

 
.mySlides { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
} 
 

 
.visible { 
 
    opacity: 1; 
 
}

<div class="slidesDiv"> 
 
    <img class="mySlides" src="//placehold.it/200x80/0fb"> 
 
    <img class="mySlides" src="//placehold.it/200x80/0bf"> 
 
    <img class="mySlides" src="//placehold.it/200x80/fb0"> 
 
    <img class="mySlides" src="//placehold.it/200x80/bbb"> 
 
</div> 
 
<h1 id="indicator">1/4</h1>

JSFiddle

Answer 2

我建议使用风格

唯一属性。如果您想使用CSS来应用新样式，则新的CSS 类可能会更好。然后你可以使用slide.className += 'fadeOut';。

现在衰落图片代码：

function fadeIn(element) { element.style['display'] = ''; 
    element.style['opacity'] = 1; } 

function fadeOut(element) { 
    element.style['opacity'] = 0; 
    setTimeout(function() { element.style['display'] = 'none'; }, YOUR_ANIMATION_DURATION_IN_MILLISECONDS); 
} 

function fadeBetween(from, to) { 
    fadeIn(from); 
    fadeOut(to); 
} 

这是我用来做最简单的。当然你可以修改它来使用CSS类而不是样式属性。应该很容易创建一个循环，并循环遍历所有应该淡出的图像。