Question

我有一个问题，点击并更改照片后，在img上获得了不透明度。我做了一个简单的滑块，从阵列中拍摄照片。如何在0到1之间添加不透明度，转换为1？我试图在js和css中添加样式但它仍然不起作用。我坐了几个小时。

<button id="prev" class="btn-navi"></button>
<div id="my-image-slider"></div>
<button id="next" class="btn-navi"></button>        

#cert #my-image-slider{
 height: 200px;
 width: 150px;
 background-color: aqua;
 /*opacity: 0;*/
 /*transition: all 3s ease;*/
}
#cert #my-image-slider img{
 height: 100%;
 width: 100%;
 opacity: 0.1;
 transition: all 2s ease;
}

var images = [];
    images.push("<img src ='img/dyplom1.jpg'>");
    images.push("<img src ='img/dyplom2.jpg'>");
    images.push("<img src ='img/dyplom3.jpg'>");

    var curIndex = 0 ;
    var mainDiv = document.getElementById("my-image-slider");
    var nextBtn = document.getElementById("next");
    var prevBtn = document.getElementById("prev");

    mainDiv.innerHTML = images[0];

    function getElement() {
        mainDiv.innerHTML = images[curIndex];
        /*images.style.opacity = 1;*/
    };

    function goNext() {
        var nextIndex = curIndex + 1;
        if (nextIndex === images.length) {
            return 0;
        } else {
            return nextIndex;
        }
    };

    nextBtn.addEventListener("click", function () {
        curIndex = goNext();
        getElement();
    });

    function goPrev() {
        var prevIndex = curIndex - 1;
        if (prevIndex === -1) {
            return images.length-1;
        } else {
            return prevIndex;
        }
    };

    prevBtn.addEventListener("click", function () {
        curIndex = goPrev();
        images.style.opacity = 1;
        getElement();
    });

Answer 1

我没有测试任何东西，但我认为你可以在css中使用@keyframes。使关键帧将其添加到某个类，然后使用js添加/删除该类。这里是关键帧链接： https://css-tricks.com/snippets/css/keyframe-animation-syntax/

单击/ javascript后对数组中的img的不透明度或淡化效果

1 个答案: