Question

我真的无法让它发挥作用..我希望图像稍微消失。发现很多建议通过不透明度过渡来做到这一点..但我无法弄明白。你能帮帮我吗？

我发现了如何解决javascript中的不透明度，但css不会影响它。读取某处删除display：none和block但是图像消失了。我确定我会错过一些基本的东西。但是大约6个小时后，我想也许你们中的一个职业选手可以帮助我。不幸的是，我不是。

提前致谢！

大卫

＆＃13;

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;

＆＃13;

#slider-wrapper {
	transition: opacity 2s;
}

＆＃13;

<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>

＆＃13;

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

您只需在样式表中首先声明opacity: 0;的{{1}}：

slider-wrapper

它不起作用的原因是因为脚本找不到属性#slider-wrapper { opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s; }

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

2 个答案: