JavaScriptを使用したスライドショーでのフェードアウト

Question

タイトルとして、スライドショー内の画像がhtml、css、javascriptのみを使用してスワップすると、フェードアウトアニメーションを追加します。私はこれを行う方法を静かではないが、私はいくつかのアイデアを持っています。 #fadeoutのように、現在の画像にidを追加できると思っていたので、フェードアウト時に特定の特性が得られました。

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. それはanimatableではありませんので、あなたは、transitionとあなたdisplayプロパティべきではありません。
2. 私はposition: absoluteを使用し、initに要素を隠すことをお勧めします。
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クラスを使用するように変更することもできます。ループを作成し、すべての画像を循環させるのは簡単ではありません。