使用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類而不是樣式屬性。應該很容易創建一個循環，並循環遍歷所有應該淡出的圖像。