如何向此脚本添加不透明度过渡?

Question

我真的无法让它工作。我希望图像淡出一点。发现很多建议通过不透明度过渡来做到这一点。但我就是想不通。你能帮我吗？

我发现了如何解决javascript中的不透明度，但css不会影响它。在某处读取以删除显示：无并阻止，但随后图像消失了。我确定我错过了一些基本的东西。但是大约 6 个小时后，我想也许你们中的一位专业人士可以帮助我。不幸的是，我不是。

提前感谢！

大卫

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");
var 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";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block"
dots[slideIndex - 1].className += " w3-white";
}
document.getElementById("slider-wrapper").style.opacity = 1;

#slider-wrapper {
	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

将div 设置为 0 不透明度，设置过渡。然后向该div 添加一个类，当您希望不透明度可见时，该类会更改不透明度。

function showDiv() {
var div = document.getElementById("slider-wrapper");
div.className += " visible";
}

.css：

#slider-wrapper {
opacity: 0;
transition: opacity 2s;
}
#slider-wrapper.visible {
opacity: 1;
}

在您的情况下，您希望对每个图像应用过渡。

设置图像元素的不透明度

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

显示图像的函数需要从当前可见元素中删除可见类，并将其添加到要显示的元素中。

Answer 2

您只需要首先在样式表中声明slider-wrapper的opacity: 0;：

#slider-wrapper {
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-ms-transition: opacity 2s;
-o-transition: opacity 2s;
}

它不起作用的原因是脚本找不到属性opacity