このスライドショースクリプトに不透明度を追加するにはどうすればよいですか？パート2

Question

もう一度聞いてみてください。私はいくつかの進歩を遂げましたが、残念ながら私はまだそれをやり遂げることができません、そして、私は少し切望しています。

私は昨日尋ねた質問はここで見つけることができます：How can I add opacity transition to this script?

アンソニーは私が「mySlides」の可視IMGに.visibleと呼ばれる余分なクラスを提供し、次のIMGが呼び出されたときにそれを削除しようとしている示唆したように。

だからいくつかの研究の後に私はそれを新しいクラスを与えるために管理します。x [slideIndex-1] .classList.add（「目に見える」）

が、移行はまだ動作しません。

私は間違っていますか？

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i, 
 
    x = document.getElementsByClassName("mySlides"), 
 
    dots = document.getElementsByClassName("demo"); 
 

 
    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[i].classList.remove("visible"); 
 
    } 
 

 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 

 
    x[slideIndex - 1].style.display = "block"; 
 
    x[slideIndex - 1].classList.add("visible") 
 
    dots[slideIndex - 1].className += " w3-white"; 
 
}

img.mySlides { 
 
    opacity: 0; 
 
    transition: opacity 2s; 
 
} 
 

 
img.mySlides.visible { 
 
    opacity: 1; 
 
    transition: opacity 2s 
 
}

<div class="w3-content w3-display-container"> 
 
    <div id="slider-wrapper"> 
 
    <img id="zupfinstrumente" class="centerscreen mySlides slidepos" src="img1.jpg" alt="xy"> 
 
    <img id="ueber-mich" class="centerscreen mySlides slidepos" src="img2.jpg" alt="xy"> 
 
    <img id="streichinstrumente" class="centerscreen mySlides slidepos" src="img3.jpg" alt="xy"></div> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos"> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
    <container id="buttons" class="centerscreen"> 
 
    <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div> 
 
    </container> 
 
</div>

Answer 1

あなたはannimationを示す画像がトリガされますときwoはあなたのimgにこの最後を使用し、あなたのcustumizedのCSS annimationを作成することができ、

annimationのCSSコード：

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

下記のスニペットをご覧ください：

var slideIndex = 1; 
 
\t showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
\t showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
\t showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
\t var i, 
 
\t \t x = document.getElementsByClassName("mySlides"), 
 
\t \t dots = document.getElementsByClassName("demo"); 
 
\t 
 
\t if (n > x.length) {slideIndex = 1 
 
\t } 
 
\t 
 
\t if (n < 1) {slideIndex = x.length 
 
\t } 
 
\t 
 
\t for (i = 0; i < x.length; i++) { 
 
\t \t x[i].style.display = "none"; 
 
\t } 
 
\t 
 
\t for (i = 0; i < dots.length; i++) { 
 
\t dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
\t } 
 
\t 
 
\t x[slideIndex-1].style.display = "block"; 
 
\t dots[slideIndex-1].className += " w3-white"; 
 
}

.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0} 
 

 

 
/* Fading animation */ 
 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-name: fade; 
 
    animation-duration: 1.5s; 
 
} 
 

 
@-webkit-keyframes fade { 
 
    from {opacity: .1} 
 
    to {opacity: 1} 
 
} 
 

 
@keyframes fade { 
 
    from {opacity: .1} 
 
    to {opacity: 1} 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<div class="w3-content w3-display-container"> 
 
    <div id="slider-wrapper"> 
 
     <img id="zupfinstrumente" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" alt="xy"> 
 
     <img id="ueber-mich" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" alt="xy"> 
 
     <img id="streichinstrumente" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" alt="xy"></div> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos"> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
    <container id="buttons" class="centerscreen"> 
 
     <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div> 
 
     <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div> 
 
    </container> 
 
</div>